「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。
流程分析
前面我们知道，整个项目的主要核心文件夹是src/src/package/vue，入口是src/src/package/vue/index.ts，除了断点方式外，我们还可以怎么知道呢？
接下来我们来聊聊这个过程。
进入项目，从package.json入手，
运行配置代码是scripts/dev.js文件，我们可以从script文件入手，看看dev的时候都做了什么
在这部分的代码中，target中实现了如果没有入参，那么就使用vue文件夹，因此，我们在dev运行的时候，打包的目标文件其实只有vue文件夹。
继续下个部分，我们要继续看参数指定传入打开的对应设置，首先运行的就是rollup，我们需要取rollup.config中查看我们的参数究竟都进行了什么操作。
打开根目录下的rollup.config.json：
我们可以看出来，“vue”最终被拼接为”packages/vue”字符串并且赋值给name
然后根据name来配置对应的outputConfig：
继续向下查询，
在第121行左右有个参数entryFile
这里描述了如果不是运行时，则入口是index.ts，我们再过一下index.ts，进入/packages/vue/src/index.ts，来看看index.ts做了什么：
整个部分其实只有一个方法，compileToFunction，这个方法的意思是，编译（转换）为函数
那么这个compileToFunction又做了什么呢？
函数的入参是 template和option，也就是说接收一个模版，以及对应的option参数
然后内部继续根据传入的模版来获取template，获取逻辑如下：
如果有元素，则取innerHTML来作为模版，但是直接获取的模版并不能直接使用，需要继续进行下一步，进行编译：
获得到渲染函数之后，再接下来将会
获取到的rander函数将会被new出来，从而获取到真正的渲染函数，最终将渲染函数赋值到当前的选项上。
至此，整个流程就顺了下来，index.ts的作用是将模版转换为渲染函数并注册。
上面流程做完之后，我们之前断点调试的createApp就该上场了，我们知道用户调用是从createApp开始的，但是index.ts中并没有createApp呐
这里我们可以在vscode中使用comand+t来搜索出现createApp的文件，
以上 —-END—-