vue.js 源码是基于 Rollup构建的,它的构建相关配置都放在script目录下。
构建脚本
通常一个基于NPM托管的项目都会有一个package.json文件,他是对项目的描述文件,它的内容实际上是一个标准的JSON对象。
我们通常会配置script字段作为NPM的执行脚本,Vue.js源码构建的脚本如下:
当在命令运行npm run build时候,实际上会执行node script/build.js ,接下来我们来看看它实际上是怎么构建的。
构建过程
我们对于构建过程分析是基于源码的,先打开构建的入口JS文件,在script/build.js中:
对于单个配置,它是遵循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
我们来看一下别名配置的代码,在 scripts/alias中:
它经过 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。