基于Rollup构建的，构建相关配置在scripts目录下

构建脚本

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

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

构建过程

入口文件scripts/build.js

  1. // 读取配置文件
  2. let builds = require('./config').getAllBuilds()
  4. // 通过命令行参数过滤构建
  5. // build:ssr
  6. if (process.argv[2]) {
  7.   const filters = process.argv[2].split(',')
  8.   builds = builds.filter(b => {
  9.     return filters.some(f => b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)
  10.   })
  11. } else {
  12.   // build:weex
  13.   builds = builds.filter(b => {
  14.     return b.output.file.indexOf('weex') === -1
  15.   })
  16. }
  18. build(builds)

配置文件scripts/config.js

  1. const aliases = require('./alias')
  2. const resolve = p => {
  3.   console.log()
  4.   const base = p.split('/')[0]
  5.   if (aliases[base]) {
  6.     return path.resolve(aliases[base], p.slice(base.length + 1))
  7.   } else {
  8.     return path.resolve(__dirname, '../', p)
  9.   }
  10. }
  12. const builds = {
  13.   // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
  14.   'web-runtime-cjs-dev': {
  15.     entry: resolve('web/entry-runtime.js'), // 构建的入口 JS 文件地址
  16.     dest: resolve('dist/vue.runtime.common.dev.js'), // 构建后的 JS 文件地址
  17.     format: 'cjs', // 构建的格式 cjs-构建出来的文件遵循CommonJs规范 es-构建出来的文件遵循ES Module规范 umd-构建出来的文件遵循UMD规范
  18.     env: 'development', // 环境
  19.     banner
  20.   },
  21.   'web-runtime-cjs-prod': {
  22.     entry: resolve('web/entry-runtime.js'),
  23.     dest: resolve('dist/vue.runtime.common.prod.js'),
  24.     format: 'cjs',
  25.     env: 'production',
  26.     banner
  27.   },
  28.   // Runtime+compiler CommonJS build (CommonJS)
  29.   'web-full-cjs-dev': {
  30.     entry: resolve('web/entry-runtime-with-compiler.js'),
  31.     dest: resolve('dist/vue.common.dev.js'),
  32.     format: 'cjs',
  33.     env: 'development',
  34.     alias: { he: './entity-decoder' },
  35.     banner
  36.   },
  37.   'web-full-cjs-prod': {
  38.     entry: resolve('web/entry-runtime-with-compiler.js'),
  39.     dest: resolve('dist/vue.common.prod.js'),
  40.     format: 'cjs',
  41.     env: 'production',
  42.     alias: { he: './entity-decoder' },
  43.     banner
  44.   },
  45.   // Runtime only ES modules build (for bundlers)
  46.   'web-runtime-esm': {
  47.     entry: resolve('web/entry-runtime.js'),
  48.     dest: resolve('dist/vue.runtime.esm.js'),
  49.     format: 'es',
  50.     banner
  51.   },
  52.   // Runtime+compiler ES modules build (for bundlers)
  53.   'web-full-esm': {
  54.     entry: resolve('web/entry-runtime-with-compiler.js'),
  55.     dest: resolve('dist/vue.esm.js'),
  56.     format: 'es',
  57.     alias: { he: './entity-decoder' },
  58.     banner
  59.   },
  60.   // Runtime+compiler ES modules build (for direct import in browser)
  61.   'web-full-esm-browser-dev': {
  62.     entry: resolve('web/entry-runtime-with-compiler.js'),
  63.     dest: resolve('dist/vue.esm.browser.js'),
  64.     format: 'es',
  65.     transpile: false,
  66.     env: 'development',
  67.     alias: { he: './entity-decoder' },
  68.     banner
  69.   },
  70.   // Runtime+compiler ES modules build (for direct import in browser)
  71.   'web-full-esm-browser-prod': {
  72.     entry: resolve('web/entry-runtime-with-compiler.js'),
  73.     dest: resolve('dist/vue.esm.browser.min.js'),
  74.     format: 'es',
  75.     transpile: false,
  76.     env: 'production',
  77.     alias: { he: './entity-decoder' },
  78.     banner
  79.   },
  80.   // runtime-only build (Browser)
  81.   'web-runtime-dev': {
  82.     entry: resolve('web/entry-runtime.js'),
  83.     dest: resolve('dist/vue.runtime.js'),
  84.     format: 'umd',
  85.     env: 'development',
  86.     banner
  87.   },
  88.   // runtime-only production build (Browser)
  89.   'web-runtime-prod': {
  90.     entry: resolve('web/entry-runtime.js'),
  91.     dest: resolve('dist/vue.runtime.min.js'),
  92.     format: 'umd',
  93.     env: 'production',
  94.     banner
  95.   },
  96.   // Runtime+compiler development build (Browser)
  97.   'web-full-dev': {
  98.     entry: resolve('web/entry-runtime-with-compiler.js'),
  99.     dest: resolve('dist/vue.js'),
  100.     format: 'umd',
  101.     env: 'development',
  102.     alias: { he: './entity-decoder' },
  103.     banner
  104.   },
  105.   // Runtime+compiler production build  (Browser)
  106.   'web-full-prod': {
  107.     entry: resolve('web/entry-runtime-with-compiler.js'),
  108.     dest: resolve('dist/vue.min.js'),
  109.     format: 'umd',
  110.     env: 'production',
  111.     alias: { he: './entity-decoder' },
  112.     banner
  113.   },
  114.   // Web compiler (CommonJS).
  115.   'web-compiler': {
  116.     entry: resolve('web/entry-compiler.js'),
  117.     dest: resolve('packages/vue-template-compiler/build.js'),
  118.     format: 'cjs',
  119.     external: Object.keys(require('../packages/vue-template-compiler/package.json').dependencies)
  120.   },
  121.   // Web compiler (UMD for in-browser use).
  122.   'web-compiler-browser': {
  123.     entry: resolve('web/entry-compiler.js'),
  124.     dest: resolve('packages/vue-template-compiler/browser.js'),
  125.     format: 'umd',
  126.     env: 'development',
  127.     moduleName: 'VueTemplateCompiler',
  128.     plugins: [node(), cjs()]
  129.   },
  130.   // Web server renderer (CommonJS).
  131.   'web-server-renderer-dev': {
  132.     entry: resolve('web/entry-server-renderer.js'),
  133.     dest: resolve('packages/vue-server-renderer/build.dev.js'),
  134.     format: 'cjs',
  135.     env: 'development',
  136.     external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  137.   },
  138.   'web-server-renderer-prod': {
  139.     entry: resolve('web/entry-server-renderer.js'),
  140.     dest: resolve('packages/vue-server-renderer/build.prod.js'),
  141.     format: 'cjs',
  142.     env: 'production',
  143.     external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  144.   },
  145.   'web-server-renderer-basic': {
  146.     entry: resolve('web/entry-server-basic-renderer.js'),
  147.     dest: resolve('packages/vue-server-renderer/basic.js'),
  148.     format: 'umd',
  149.     env: 'development',
  150.     moduleName: 'renderVueComponentToString',
  151.     plugins: [node(), cjs()]
  152.   },
  153.   'web-server-renderer-webpack-server-plugin': {
  154.     entry: resolve('server/webpack-plugin/server.js'),
  155.     dest: resolve('packages/vue-server-renderer/server-plugin.js'),
  156.     format: 'cjs',
  157.     external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  158.   },
  159.   'web-server-renderer-webpack-client-plugin': {
  160.     entry: resolve('server/webpack-plugin/client.js'),
  161.     dest: resolve('packages/vue-server-renderer/client-plugin.js'),
  162.     format: 'cjs',
  163.     external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  164.   },
  165.   // Weex runtime factory
  166.   'weex-factory': {
  167.     weex: true,
  168.     entry: resolve('weex/entry-runtime-factory.js'),
  169.     dest: resolve('packages/weex-vue-framework/factory.js'),
  170.     format: 'cjs',
  171.     plugins: [weexFactoryPlugin]
  172.   },
  173.   // Weex runtime framework (CommonJS).
  174.   'weex-framework': {
  175.     weex: true,
  176.     entry: resolve('weex/entry-framework.js'),
  177.     dest: resolve('packages/weex-vue-framework/index.js'),
  178.     format: 'cjs'
  179.   },
  180.   // Weex compiler (CommonJS). Used by Weex's Webpack loader.
  181.   'weex-compiler': {
  182.     weex: true,
  183.     entry: resolve('weex/entry-compiler.js'),
  184.     dest: resolve('packages/weex-template-compiler/build.js'),
  185.     format: 'cjs',
  186.     external: Object.keys(require('../packages/weex-template-compiler/package.json').dependencies)
  187.   }
  188. }

别名配置文件scripts/alias

  1. const path = require('path')
  3. const resolve = p => path.resolve(__dirname, '../', p)
  5. module.exports = {
  6.   vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  7.   compiler: resolve('src/compiler'),
  8.   core: resolve('src/core'),
  9.   shared: resolve('src/shared'),
  10.   web: resolve('src/platforms/web'),
  11.   weex: resolve('src/platforms/weex'),
  12.   server: resolve('src/server'),
  13.   sfc: resolve('src/sfc')
  14. }

举例子

以 web-runtime-cjs-dev 配置为例，entry是 web/entry-runtime.js
知步骤看变量值

  1. base |-| web
  2. aliases[base] |-| path.resolve(__dirname, '../', 'src/platforms/web')
  3. p.slice(base.length + 1) |-| 'entry-runtime.js'
  4. return的值 |-| 'D:\selfItems\vue\src\platforms\web\entry-runtime.js'

这样web-runtime-cjs 配置对应的入口文件就找到了，经过Rollup的构建打包后最终会在dist目录下生成vue.runtime.common.js

Runtime Only VS Runtime + Compiler

利用 vue-cli 去初始化 Vue.js 项目的时候会询问是用 Runtime Only 版本的还是 Runtime + Compiler 版本

Runtime Only

使用这个版本的Vue.js时通常需要借助如webpack的vue-loader工具把文件编译成Javascript
是在编译阶段做的，所有只包含运行时Vue.js代码，因而代码体积会更轻量

Runtime + Compiler

如果没有对代码做预编译，但又使用了Vue的template属性并传入一个字符串，则需要在客户端编译模板

  1. // 需要编译器的版本
  2. new Vue({
  3.   template: '<div>{{ hi }}</div>'
  4. })
  6. // 这种情况不需要
  7. new Vue({
  8.   render (h) {
  9.     return h('div', this.hi)
  10.   }
  11. })

在Vue2.0中最终渲染都是通过render函数，如果写template属性则需要编译成render函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本
这个编译过程对性能有一定损耗，所以通常推荐使用Runtime-Only的Vue.js