Vue.js源码解读前的准备工作

前言

Vue.js最终是导出给外部使用的。所以在源码中，我们需要先找到 “入口文件”，它作为一个出发点，找到它之后可以看其他文件的实现。

怎么找“入口文件”呢？

1. 将 vue.js（以 v.2.6.14，也是 2.6 版本的终结版）clone 到本地之后，在一级目录中有一个 .github 的文件夹，里面的有一个 CONTRIBUTING.md 文件，可以查看 常用的 NPM 脚本；

可以看到 vue.js 的构建命令是 npm run dev；

2. 现在我们进入 package.json 文件，看scripts下的 dev 脚本，得知 vue.js是使用 rollup 打包的，脚本文件在 scripts/config.js 中，此时的 environment 为 TARGET:web-full-dev，先记住这个值，后面会用到；

3. 现在进入到 scripts/config.js 文件，看代码最后（一般导出的代码是放在最后）；

if (process.env.TARGET) { // 这里的 process.env.TARGET 就是 刚刚的 web-full-dev（表示此时的环境）
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

4. 此时看到 genConfig函数，进入这个文件（这个函数也在此文件中定义）；

可以看到，我们要找的就是 input（入口）对应的值，也就是截图里面的序号 2。要得到 2，首先需要知道 序号 1 中 builds在干嘛？

5. 现在进入 builds对象（也在此文件中定义），我们知道 builds[name]中，name === ‘web-full-dev’，所以找到builds对象中键为 ‘web-full-dev’ 所对应的 value，并且找到 entry 属性。发现有一个 resolve方法；

6. 进入到 resolve方法。其实就是获取入口文件路径的。具体细节现在不需要弄清楚，因为此时是为了找到入口的。只要知道这段代码的作用是获取路径： src/platforms/web/entry-runtime-with-compiler.js，因此找到了打包的开始文件。

7. 进入 entry-runtime-with-compiler.js 文件，看到 import Vue from ‘./runtime/index’，根据 import 继续找定义 Vue 的文件；

8. 进入到 ./runtime/index，发现 Vue 是从外层导进来的（ import Vue from ‘core/index’）；

9. 进入到 core/index文件，继续进入 ‘./instance/index’ 文件；

10. 好，入口找到了。下面才可以真正算看 Vue 源码。

总结

找到“入口文件”的过程，其实就是从 npm 脚本出发，然后通过一层一层的函数调用，字符串拼接，最后找到入口文件路径。这个过程中有实现这条主线路的细枝末节会干扰大家，暂时先不用管，知道它是干嘛的就行，具体可以后面感兴趣看。