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版本的构建过程分为五步
- 创建dist目录，后面打包好的文件都输出在dist目录下
- 拿到所有的build配置
- 根据传入的参数，对build配置进行过滤，排除不必要的打包项目
- 根据build的参数，生成打包后的代码
- 如果构建的是线上模式，则进行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...
