vue源码构建

vue.js 源码是基于 Rollup构建的，它的构建相关配置都放在script目录下。

构建大概过程

构建脚本

通常一个基于NPM托管的项目都会有一个package.json文件，他是对项目的描述文件，它的内容实际上是一个标准的JSON对象。

我们通常会配置script字段作为NPM的执行脚本，Vue.js源码构建的脚本如下：

总共3条命令，作用都是构建Vue.js，后面2条是在第一条命令的基础上，添加了一些环境参数

当在命令运行npm run build时候，实际上会执行node script/build.js ，接下来我们来看看它实际上是怎么构建的。

构建过程

我们对于构建过程分析是基于源码的，先打开构建的入口JS文件，在script/build.js中：

逻辑非常简单，先从配置文件读取配置，再通过命令行参数对构建配置做过滤，这样就可以构建出不同的Vue.js了。

这里列举了一些 Vue.js 构建的配置，关于还有一些服务端渲染 webpack 插件以及 weex 的打包配置就不列举了。

对于单个配置，它是遵循Rollup的构建规则的。其中enter属性表示构建的入口JS文件地址，dest属性表示构建后的JS文件地址。format属性表示构建的格式（cjs表示构建出来的文件遵循CommonJS规范，es表示构建出来的文件遵循ES Module规范，umd表示构建出来的文件遵循UMD规范）。

以web-runtime-cjs为例，它的enter是 resolve('web/enter-runtime.js')，先来看一下resolve函数定义。

源码目录：scripts/config.js

这里的 resolve 函数实现非常简单，它先把 resolve 函数传入的参数 p 通过 / 做了分割成数组，然后取数组第一个元素设置为 base。在我们这个例子中，参数 p 是 web/entry-runtime.js，那么 base 则为 web。base 并不是实际的路径，它的真实路径借助了别名的配置。

我们来看一下别名配置的代码，在 scripts/alias中：

很显然，这里 web 对应的真实的路径是 path.resolve(__dirname, '../src/platforms/web')，这个路径就找到了 Vue.js 源码的 web 目录。然后 resolve 函数通过 path.resolve(aliases[base], p.slice(base.length + 1)) 找到了最终路径，它就是 Vue.js 源码 web 目录下的 entry-runtime.js。因此，web-runtime-cjs 配置对应的入口文件就找到了。

它经过 Rollup 的构建打包后，最终会在 dist 目录下生 成 vue.runtime.common.js。

Runtime Only VS Runtime＋Compiler

        通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候会询问我们用 Runtime Only 版本的还是 Runtime+Compiler 版本。下面我们来对比这两个版本。

Runtime Only

        我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。

Runtime+Compiler

        我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：       

是否需要客户端编

        因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

很显然，这个编译过程对性能会有一定损耗，所以通常我们更推荐使用 Runtime-Only 的 Vue.js。

总结

        通过这一节的分析，我们可以了解到 Vue.js 的构建打包过程，也知道了不同作用和功能的 Vue.js 它们对应的入口以及最终编译生成的 JS 文件。尽管在实际开发过程中我们会用 Runtime Only 版本开发比较多，但为了分析 Vue 的编译过程，我们这门课重点分析的源码是 Runtime+Compiler 的 Vue.js。