Vue.js揭秘-源码构建

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

构建脚本

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

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

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

当在命令行运行 的时候，实际上就会执行 ，接下来我们来看看它实际是怎么构建的。

构建过程

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

这段代码逻辑非常简单，先从配置文件读取配置，再通过命令行参数对构建配置做过滤，这样就可以构建出不同用途的 Vue.js 了。接下来我们看一下配置文件，在 中：

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

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

以 配置为例，它的 是 ，先来看一下 函数的定义。

源码目录：

这里的 函数实现非常简单，它先把 函数传入的参数 通过 做了分割成数组，然后取数组第一个元素设置为 。在我们这个例子中，参数 是 ，那么 则为 。 并不是实际的路径，它的真实路径借助了别名的配置，我们来看一下别名配置的代码，在 中：

很显然，这里 对应的真实的路径是 ，这个路径就找到了 Vue.js 源码的 web 目录。然后 函数通过 找到了最终路径，它就是 Vue.js 源码 web 目录下的 。因此， 配置对应的入口文件就找到了。

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

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 中，最终渲染都是通过 函数，如果写 属性，则需要编译成 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

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