大前端进阶-读懂vuejs源码

前言

此文章适合准备第一次阅读vuejs源码的童鞋，由于vuejs的源码非常多，而且分布在各个文件夹中，因此想要读懂源码，需要理清整个框架的脉络。此文章就是从编译入口出发，找到源码中的关键点。
准备工作
打包源码
浏览器调试比单纯的阅读源码更有效率，那么如何为vuejs添加sourceMap？

1.fork vue源码仓库到自己的github仓库中，这样，可以随便添加注释和修改。
2.下载项目，打开package.json文件，找到文件中：

1.vuejs使用rollup打包，在dev命令最后添加--sourcemap。
2.执行 npm run dev进行打包，生成带sourcemap的vue文件。

3.找到examples文件夹，随便找一个用例，将vue文件的引用地址改为新打包生成的文件。

1.用浏览器打开html文件，打开控制台，就可以看到源码。

了解打包文件

在命令行中执行npm run build，会打包所有版本的vue文件，打包结果如下：

其中：

common 表示符合commonjs规范的文件。
ems 表示符合ES Module规范的文件。
dev 表示文件内容未压缩，是可读的。
prod 表示文件内容是压缩过的。
runtime
表示运行时版本，不包含模版编译功能。也就是在声明组件的时候无法编译template模版，只能使用render函数。 vue-cli构建的项目中，由于打包的时候会将template模版编译成render函数，所以其打包后引用的vue版本为运行时版本。

在vue-cli创建的项目中执行vue inspect > out.js。可以将所有的webpack配置输出到out.js文件中，查看其中的resolve配置可以看到其打包的vue版本：

resolve: {
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    }
}

未加common,es
表示是umd规范文件，此文件可以支持commonjs，ES Module，AMD，或者直接通过window.Vue方式引用。

未加rentime
表示完整版本，包含运行时和编译器。整体代码比运行时版本多。

入口文件
vuejs项目的打包入口文件，可以当作是源码阅读的入口文件。

打包的时候执行的是如下命令：

rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap

其中scripts/config.js为rollup配置文件所在路径，rollup配置文件要求导出一个对象，其中 input属性指定打包入口文件。

scripts/config.js
在该文件的最后：

if (process.env.TARGET) {
  module.exports &