Vue2源码梳理：源码构建流程与运行时和编译时的版本选择

Vue.js 源码构建

1 ）rollup 和 webpack 的对比

vuejs的源码呢是基于rollup构建的
- 参考: https://github.com/rollup/rollup
rollup 和 webpack 都是一个构建工具
- webpack 它会更强大一些, 会把像图片, css等静态资源通通编译成javascript
- rollup 更适合一种javscript库的一个编译
  - 它只出了js部分，而其他资源它是不管的，所以它更轻量
  - 在编译后代码也是更友好的
- 所以 vuejs 就选了rollup做构建

2 ）rollup的构建设计

vuejs 是发布到 npm 上的一个包, 每个包都是需要一个package.json文件来做描述
它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象
比如说，常用的属性， name, version, description, main, module, …
- main 是vue的入口，在 import vue 时，通过这个 main 来查找入口, 后缀是.js
- module 和 main 非常类似的，在webpack2以上把 module作为默认入口, 后缀是 .esm.js
vuejs 源码是基于 rollup 构建的，它的构建相关配置都在 scripts 目录下
npm 提供了一个叫 npm scripts 的东西
- 之前早期构建, 可能会用到gulp或者grunt
- 它们两个都是一个以任务为基准的
- 也就是说可以定义一系列任务
- npm scripts 就是完成了这部分的功能
- 也就是说它定义了很多脚本, 每个脚本都是一个任务
- 通过 npm run xxx 可以执行不同的任务
- 构建相关的任务，就是这三个
  - build 构建web平台相关
  - build:ssr 构建服务端渲染相关
  - build:weex 构建weex平台相关
我们的源码是托管在 src 目录下，通过构建生成的目标代码在 dist 目录下
- 在vue的仓库下，它已经默认帮我们构建出来很多版本的vuejs
- 那为什么我们能构建如此多版本的vuejs呢？

3 ）rollup构建vuejs的过程

package.json

{"script": {"build": "node scripts/build.js","build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer","build:weex": "npm run build -- weex"}
}

当我们去执行的这个 npm scripts 的时候，比如说，执行 npm run build
它实际上就是执行了这样一个脚本 node scripts/build.js
我们来看一下 scripts/build.js

scripts/build.js

const fs = require('fs')
const path = require('path')
const zlib = require('zlib')
const rollup = require('rollup')
const terser = require('terser')if (!fs.existsSync('dist')) {fs.mkdirSync('dist')
}let builds = require('./config').getAllBuilds()// filter builds via command line arg
if (process.argv[2]) {const filters = process.argv[2].split(',')builds = builds.filter(b => {return filters.some(f => b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)})
} else {// filter out weex builds by defaultbuilds = builds.filter(b => {return b.output.file.indexOf('weex') === -1})
}build(builds)function build (builds) {let built = 0const total = builds.lengthconst next = () => {buildEntry(builds[built]).then(() => {built++if (built < total) {next()}}).catch(logError)}next()
}function buildEntry (config) {const output = config.outputconst { file, banner } = outputconst isProd = /(min|prod)\.js$/.test(file)return rollup.rollup(config).then(bundle => bundle.generate(output)).then(({ output: [{ code }] }) => {if (isProd) {const minified = (banner ? banner + '\n' : '') + terser.minify(code, {toplevel: true,output: {ascii_only: true},compress: {pure_funcs: ['makeMap']}}).codereturn write(file, minified, true)} else {return write(file, code)}})
}function write (dest, code, zip) {return new Promise((resolve, reject) => {function report (extra) {console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || ''))resolve()}fs.writeFile(dest, code, err => {if (err) return reject(err)if (zip) {zlib.gzip(code, (err, zipped) => {if (err) return reject(err)report(' (gzipped: ' + getSize(zipped) + ')')})} else {report()}})})
}function getSize (code) {return (code.length / 1024).toFixed(2) + 'kb'
}function logError (e) {console.log(e)
}function blue (str) {return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
}

前面声明读取的模块
let builds = require('./config').getAllBuilds() 是从配置文件中，读取配置
之后，再通过命令行参数对构建配置做过滤，最终调用 build() 函数进行真正的构建
所以它整个的构建的流程是非常清晰的
那我们首先来分析一下这个这就是怎么拿到的

打开 .config 文件

const path = require('path')
const buble = require('rollup-plugin-buble')
const alias = require('rollup-plugin-alias')
const cjs = require('rollup-plugin-commonjs')
const replace = require('rollup-plugin-replace')
const node = require('rollup-plugin-node-resolve')
const flow = require('rollup-plugin-flow-no-whitespace')
const version = process.env.VERSION || require('../package.json').version
const weexVersion = process.env.WEEX_VERSION || require('../packages/weex-vue-framework/package.json').version
const featureFlags = require('./feature-flags')const banner ='/*!\n' +` * Vue.js v${version}\n` +` * (c) 2014-${new Date().getFullYear()} Evan You\n` +' * Released under the MIT License.\n' +' */'const weexFactoryPlugin = {intro () {return 'module.exports = function weexFactory (exports, document) {'},outro () {return '}'}
}const aliases = require('./alias')
const resolve = p => {const base = p.split('/')[0]if (aliases[base]) {return path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)}
}const builds = {// Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify'web-runtime-cjs-dev': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.common.dev.js'),format: 'cjs',env: 'development',banner},'web-runtime-cjs-prod': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.common.prod.js'),format: 'cjs',env: 'production',banner},// Runtime+compiler CommonJS build (CommonJS)'web-full-cjs-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.common.dev.js'),format: 'cjs',env: 'development',alias: { he: './entity-decoder' },banner},'web-full-cjs-prod': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.common.prod.js'),format: 'cjs',env: 'production',alias: { he: './entity-decoder' },banner},// Runtime only ES modules build (for bundlers)'web-runtime-esm': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.esm.js'),format: 'es',banner},// Runtime+compiler ES modules build (for bundlers)'web-full-esm': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.esm.js'),format: 'es',alias: { he: './entity-decoder' },banner},// Runtime+compiler ES modules build (for direct import in browser)'web-full-esm-browser-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.esm.browser.js'),format: 'es',transpile: false,env: 'development',alias: { he: './entity-decoder' },banner},// Runtime+compiler ES modules build (for direct import in browser)'web-full-esm-browser-prod': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.esm.browser.min.js'),format: 'es',transpile: false,env: 'production',alias: { he: './entity-decoder' },banner},// runtime-only build (Browser)'web-runtime-dev': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.js'),format: 'umd',env: 'development',banner},// runtime-only production build (Browser)'web-runtime-prod': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.min.js'),format: 'umd',env: 'production',banner},// Runtime+compiler development build (Browser)'web-full-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.js'),format: 'umd',env: 'development',alias: { he: './entity-decoder' },banner},// Runtime+compiler production build  (Browser)'web-full-prod': {entry: resolve('web/entry-runtime-with-compiler.js'),dest: resolve('dist/vue.min.js'),format: 'umd',env: 'production',alias: { he: './entity-decoder' },banner},// Web compiler (CommonJS).'web-compiler': {entry: resolve('web/entry-compiler.js'),dest: resolve('packages/vue-template-compiler/build.js'),format: 'cjs',external: Object.keys(require('../packages/vue-template-compiler/package.json').dependencies)},// Web compiler (UMD for in-browser use).'web-compiler-browser': {entry: resolve('web/entry-compiler.js'),dest: resolve('packages/vue-template-compiler/browser.js'),format: 'umd',env: 'development',moduleName: 'VueTemplateCompiler',plugins: [node(), cjs()]},// Web server renderer (CommonJS).'web-server-renderer-dev': {entry: resolve('web/entry-server-renderer.js'),dest: resolve('packages/vue-server-renderer/build.dev.js'),format: 'cjs',env: 'development',external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)},'web-server-renderer-prod': {entry: resolve('web/entry-server-renderer.js'),dest: resolve('packages/vue-server-renderer/build.prod.js'),format: 'cjs',env: 'production',external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)},'web-server-renderer-basic': {entry: resolve('web/entry-server-basic-renderer.js'),dest: resolve('packages/vue-server-renderer/basic.js'),format: 'umd',env: 'development',moduleName: 'renderVueComponentToString',plugins: [node(), cjs()]},'web-server-renderer-webpack-server-plugin': {entry: resolve('server/webpack-plugin/server.js'),dest: resolve('packages/vue-server-renderer/server-plugin.js'),format: 'cjs',external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)},'web-server-renderer-webpack-client-plugin': {entry: resolve('server/webpack-plugin/client.js'),dest: resolve('packages/vue-server-renderer/client-plugin.js'),format: 'cjs',external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)},// Weex runtime factory'weex-factory': {weex: true,entry: resolve('weex/entry-runtime-factory.js'),dest: resolve('packages/weex-vue-framework/factory.js'),format: 'cjs',plugins: [weexFactoryPlugin]},// Weex runtime framework (CommonJS).'weex-framework': {weex: true,entry: resolve('weex/entry-framework.js'),dest: resolve('packages/weex-vue-framework/index.js'),format: 'cjs'},// Weex compiler (CommonJS). Used by Weex's Webpack loader.'weex-compiler': {weex: true,entry: resolve('weex/entry-compiler.js'),dest: resolve('packages/weex-template-compiler/build.js'),format: 'cjs',external: Object.keys(require('../packages/weex-template-compiler/package.json').dependencies)}
}function genConfig (name) {const opts = builds[name]const config = {input: opts.entry,external: opts.external,plugins: [flow(),alias(Object.assign({}, aliases, opts.alias))].concat(opts.plugins || []),output: {file: opts.dest,format: opts.format,banner: opts.banner,name: opts.moduleName || 'Vue'},onwarn: (msg, warn) => {if (!/Circular/.test(msg)) {warn(msg)}}}// built-in varsconst vars = {__WEEX__: !!opts.weex,__WEEX_VERSION__: weexVersion,__VERSION__: version}// feature flagsObject.keys(featureFlags).forEach(key => {vars[`process.env.${key}`] = featureFlags[key]})// build-specific envif (opts.env) {vars['process.env.NODE_ENV'] = JSON.stringify(opts.env)}config.plugins.push(replace(vars))if (opts.transpile !== false) {config.plugins.push(buble())}Object.defineProperty(config, '_name', {enumerable: false,value: name})return config
}if (process.env.TARGET) {module.exports = genConfig(process.env.TARGET)
} else {exports.getBuild = genConfigexports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

这个config文件在最后一行暴露了一个方法，叫 getAllBuilds，它是一个函数
- 这个函数做了什么事情呢？ Object.keys(builds).map(genConfig)
- 拿到一个keys的数组，然后我们再通过map方法调用这个 genConfig 函数
我们来看这个 builds 参数
- 上面代码大篇幅定义了 builds 对象
- 里面每个key对应的也都是一个对象
  - 通过注释可知，是不同版本的vuejs的编译配置
  - 每一个编译配置它都会有一个 entry 顾名思义就是入口
  - dest 顾名思义就是目标
  - 还有一个format(输出格式) 和 banner(头部注释)

这个 entry 它是通过 resolve 这个函数，然后传一个字符串(文件地址)

const aliases = require('./alias')
const resolve = p => {const base = p.split('/')[0]if (aliases[base]) {return path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)}
}

resolve 函数，它就是接收一个参数。这个字符参数会通过split(‘/’) 拿到第一个值作为base

之后判断 aliases 这个 aliases 也是 require 进来的，看下这个 alias 文件

const path = require('path')
const resolve = p => path.resolve(__dirname, '../', p)module.exports = {vue: resolve('src/platforms/web/entry-runtime-with-compiler'),compiler: resolve('src/compiler'),core: resolve('src/core'),shared: resolve('src/shared'),web: resolve('src/platforms/web'),weex: resolve('src/platforms/weex'),server: resolve('src/server'),sfc: resolve('src/sfc')
}

可见，alias 文件提供别名到真实地址文件的映射
回到最上面的 resolve 方法内部，最终返回了从参数到真实地址的字符串

dest 这个key也走的 resolve, 只不过走到了最终 else 的环节里
format 是构建出来的文件格式，cjs 对应的就是 xxx.common.js
- cjs 最终生成的js文件是 module.exports = Vue
- es 最终生成的文件是 export default Vue
- umd 最终生成的文件是符合 umd 规范的 vuejs 文件
- …
所以，很显然
- 上面 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
banner 是自己设计的头部注释
- 里面可以写八本，日期，作者，license 等信息
再回到我们的config，最终通过 Object.keys(builds).map(genConfig)
- 拿到这个所有keys 的一个数组，然后这个这个数组我们去调用这个 genConfig 函数
- genConfig 就拿到每个key，然后它就会拿到这个对象，再通过 build[name]
- name 是key对应的这个对象，构造出一个新的 config 对象
  - 里面有 input, external, plugins, output, …
- 这个最终的 config 对象才是 rollup 打包所需要的配置结构
- 这是个适配器来进行的转换工作
返回到 let builds = require('./config').getAllBuilds()
- 这里的 builds 是一个数组
之后进行 if (process.argv[2]) {} 的判断
- 提取到命令行输出的参数，如 – weex 等
- 如果有参数，则会通过 filter 来过滤一些不需要的流程
最终编译的时候，就调用 build(builds) 在里面进行一个个的编译
- 里面定义一个 next() 函数，里面调用 buildEntry, 之后递归，里面有个 built 计数器
- 而 buildEntry 传入最终的config， config作为最终rollup的参数进行构建
- 编译完之后得到了 bundle, 通过了 bundle.generate 传入 output
- 之后拿到 code, 判断环境，分别做处理，最终通过 write 方法，得到构建好的文件
- 在生成的过程中，打下一些 log 信息
这是整个的构建流程

4 ） Runtime Only VS Runtime + Compiler

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

4.1 ） Runtime Only

我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript
在浏览器里，是不认识 .vue文件的，所以需要一个编译的过程，在编译阶段，会把 template 模板编译成 render 函数
最终编译后的，就是一个 render 函数的版本，所以vue是不带编译的，也就是运行时不带编译
所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量

4.2 ）Runtime + Compiler

我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：
```
// 需要编译器的版本
new Vue({template: '<div>{{ hi }}</div>'
})
```

这种一定要选择 Runtime + Compiler 版本

// 这种情况不需要
new Vue({render (h) {return h('div', this.hi)}
})

这种就不需要
而 .vue文件是在编译过程中，通过 vue-loader 处理的
所以我们写的 .vue 文件在运行的时候已经编译成 js 函数了，并且模板部分已经编译成 render 函数了
在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数
那么这个编译过程会发生运行时，需要带有编译器的版本
很显然，这个编译过程对性能会有一定损耗，所以通常开发阶段更推荐使用 Runtime-Only 的 Vue.js
- 一种是运行时的性能优化，一种是编译出来的体积会更轻量