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

  • 一种是运行时的性能优化，一种是编译出来的体积会更轻量

5 ）总结

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