Vue源码系列3------Vue源码构建原理

了解了单一的模块，下面来看看Vue是怎么组织这些模块的

---

Vue.js 源码是基于 Rollup 【打包构建工具；更轻量】构建的，它的构建相关配置都在 scripts 目录下。

 

构建脚本

通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置 script 字段作为 NPM 的执行脚本，Vue.js 源码构建的脚本如下：

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

当在命令行运行 npm run build 的时候，实际上就会执行 node scripts/build.js。

源码托管在src目录下，通过build构建生成的目标代码会存储在dist目录下

构建过程

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

这个过程主要作用是从项目中配置文件读取配置，再通过命令行参数对构建配置做过滤，然后根据不同用途的构建出不同的 Vue.js 了。

下面来看看配置文件，scripts/config.js 。下面列举一些Vue.js 构建的常见配置，主要针对于Web。对于单个配置，它是遵循 Rollup 的构建规则的。其中 entry 属性表示构建的入口 JS 文件地址，dest 属性表示构建后的 JS 文件地址。format 属性表示构建的格式，cjs 表示构建出来的文件遵循 CommonJS 规范，es 表示构建出来的文件遵循 ES Module 规范。 umd 表示构建出来的文件遵循 UMD 规范。banner:定义了一个文件注释。

下面我们简单看看是怎么运行的：

通过resolve()-----scripts/alias.js(取得一个key)-----src/(对应目录)

                     -----dist/相关目录

从这里拿到一个数组keys

然后拿到genConfig()中进行解析,在其中构建出一个新的config对象，定义出Rollup 打包所标准的数据结构，以下就是标准的数据格式

返回scripts/build.js。通过filter函数进行过滤；然后开始打包

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。