2.vuejs构建过程分析

Vue.js 源码基于Rollup构建。 Rollup较轻量。只编译js的部分，不支持编译图片和css等

先看下vuejs的package.json

// 地址 vue-2.6/package.json
"scripts": {
    // ...
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    // ...
},

这里总共有三条构建命令，vue-ssr vue-weex的版本在这里先不做分析。

web版本的构建过程分为五步

1. 创建dist目录，后面打包好的文件都输出在dist目录下
2. 拿到所有的build配置
3. 根据传入的参数，对build配置进行过滤，排除不必要的打包项目
4. 根据build的参数，生成打包后的代码
5. 如果构建的是线上模式，则进行gzip压缩测试

1.创建dist目录

// 地址 vue-2.6/script/build
const fs = require('fs')
// 创建dist 
if (!fs.existsSync('dist')) {
  fs.mkdirSync('dist')
}

2.拿到所有的build配置

// 地址 vue-2.6/script/build
let builds = require('./config').getAllBuilds()

./config中的 getAllBuilds其实就是把默认的配置项转成Rollup需要的格式

// 地址 vue-2.6/script/config

/* builds的配置
 * entry:   入口路径，最终都指向了src/web目录下
 * dest:    输出的路径 最终都在dist目录下输出
 * format:  输出的规范 cjs => CommonJS，es => ES Module，umd => UMD。
 * env:     开发模式和线上模式  开发模式不压缩代码并且生成的.map文件会更详细
 * banner:  拼接在生成后的代码头部
 */
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
  }
  // 省略...
}
// 将builds处理成Rollup需要的格式
function genConfig(name) {
    const opts = builds[name]
    const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      replace({
        __WEEX__: !!opts.weex,
        __WEEX_VERSION__: weexVersion,
        __VERSION__: version
      }),
      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)
      }
    }
    }
    
    if (opts.env) {
    config.plugins.push(replace({
      'process.env.NODE_ENV': JSON.stringify(opts.env)
    }))
    }
    
    if (opts.transpile !== false) {
    config.plugins.push(buble())
    }
    
    Object.defineProperty(config, '_name', {
    enumerable: false,
    value: name
    })
    
    return config
}
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)

排除不必要的打包项目

// npm run build:ssr process.argv[2] = web-runtime-cjs,web-server-renderer 这两种模式的区别下面会讲到
// npm run build:weex process.argv[2] = weex
// npm run build undefined
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 default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

根据build的参数，生成打包后的代码

先来看看build方法

build(builds)

function build (builds) {
  let built = -100
  const total = builds.length
  const next = () => {
    buildEntry(builds[built]).then(() => {
      built++
      if (built < total) {
        next()
      }
    }).catch(logError)
  }

  next()
}
function logError (e) {
  console.log(e)
}

读到这里的时候产生了两个疑问。
1、为什么不直接用for循环调用buildEntry方法呢

// 为什么不这样实现呢? 因为：catch方法中没法办结束循环，会导致后面继续运行
for(let i = 0; i < builds.length; i++) {
   buildEntry(builds[i]).catch(logError)
}

2、logError是一个函数，可以不打括号这样调用吗

// 平时我习惯的声明函数方法是
let logError = e => {console.log(e)}
// 如果这样写就必须要 .catch((e) => logError(e)) 才能调到
// 但是如果是用function 声明的函数则不需要打括号传参过去

完整的构建函数

function build (builds) {
  let built = -100
  const total = builds.length
  const next = () => {
    buildEntry(builds[built]).then(() => {
      built++
      if (built < total) {
        next()
      }
    }).catch(logError)
  }

  next()
}

function buildEntry (config) {
  const output = config.output
  const { file, banner } = output
  // 是否需要压缩
  const isProd = /(min|prod)\.js$/.test(file)
  return rollup.rollup(config)
    .then(bundle => bundle.generate(output))
    .then(({ output: [{ code }] }) => {
      if (isProd) {
        // 处理压缩 和 map文件
        const minified = (banner ? banner + '\n' : '') + terser.minify(code, {
          toplevel: true,
          output: {
            ascii_only: true
          },
          compress: {
            pure_funcs: ['makeMap']
          }
        }).code
        return 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)
      // gzip压缩
      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'
}

Runtime Only 和 Runtime+Compiler

在构建web版本的vue时，会默认构建出Runtime Only 和 Runtime+Compiler两个版本
1、Runtime Only

// 只认识render函数  不支持template: '<div>{{ hi }}</div>'，更不认识.vue文件
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

2、 Runtime+Compiler

// 认识render函数和template，体积较大，编译template的过程耗时 
// 如果写template属性，则需要编译成render函数。这个编译过程会发生运行时
newew Vue({
  template: '<div>{{ hi }}</div>'
})

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

用脚手架构建的项目其实是通过vue-loader插件将.vue文件转为了render函数
所以更推荐Runtime Only
至于单文件的vue项目，如果你能不使用template，只用render函数写组件 那也更推荐Runtime Only

end...