本文深入剖析Vue.js源码构建过程，详细讲解如何使用Rollup进行构建。首先，从scripts/build.js引入依赖，接着从config.js获取构建配置，通过genConfig()函数生成Rollup所需的配置。然后，根据命令行参数过滤配置，最后调用build()函数执行实际构建。构建过程中涉及的主要步骤包括定义依赖、配置筛选、构建执行等，产出不同格式和用途的Vue.js版本。
目录很重要
关键词：看住build.js文件 定义依赖 拿到配置 进行筛选 进行构建
Vue.js 源码构建
Vue 用 Rollup 做构建
Rollup 和 webpack 一样都是构建工具，webpack 更强大，rollup 更适合 JavaScript 库的编译且更轻量且代码更友好，所以 Vue.js 选了 rollup 做构建，它的构建相关配置都在 scripts 目录下。
构建脚本
vue 发布在 npm 上，每个 npm 包（相当于一个项目）都需要一个package.json文件来对他做描述，它的内容实际上是一个标准的 JSON 对象。我们通常会配置script字段作为 NPM 的执行脚本。
{
"name": "vue",
"version": "2.6.13",
"main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",
"scripts": {
// 构建相关的任务就是这三个， "build" 是建立 web平台的 Vue.js，"build ssr" 是输出跟 server renderer 相关，"build weex" 是跟 weex 相关。作用都是构建 Vue.js，后面 2 条是在第 1 条命令的基础上，添加一些环境参数。
"build": "node scripts/build.js",
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
"build:weex": "npm run build -- weex",
}
}
| 字段 | 含义 |
|---|---|
| name | 名字，是唯一的 |
| version | 版本 |
| main | npm 包入口，import "vue"时会通过 main 查找入口 |
| module | module 和 main 非常类似，在 webpack2 以上是把 module 做默认入口，也可以说 Vue.js 的默认入口是 esm.js 文件 |
| scripts | npm 提供了 npm scripts ， scripts定义了很多脚本，每个脚本都是一个任务，通过 npm run 值（dev，bulid）可以进行各种不同的脚本执行不同的任务。 |
通过构建生成的目标代码在 dist 文件下，默认已经构建了很多版本的 Vue.js 。
构建过程
为什么可以构建如此多版本的 Vue.js ？那就要先了解它的构建过程。例如执行npm run build，实际上是执行了node scripts/build.js脚本，也就是跑了 scripts 文件夹下build.js文件的 js 。
（1）定义依赖的模块
// 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')
}
（2）从config.js配置文件中拿到构建所需要的所有的配置
// scripts/build.js
let builds = require('./config').getAllBuilds()
config.js文件底部暴露了一个方法exports.getAllBuilds()，这是一个函数，通过Object.keys(builds)拿到一个数组，然后通过map()方法调用genConfig()函数
// scripts/config.js
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
1、Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
2、枚举是指一一列举列
3、map的三个参数：数组元素，元素索引，原数组本身
arr.map((currentValue,index,array)=>{})
builds
其实builds是一个对象，每个key对应一个对象，其实就是不同版本 Vue.js 编译的配置
entry：入口，通过resolve()函数传字符串web/entry-runtime.js
dest：目标
format：文件格式，通过不同的format可以构建不同的版本
banner：局部变量，定义注释
entry和dest
所以最后以entry-runtime.js为编译入口，最后生成vue.runtime.common.dev.js文件
// scripts/config.js
const builds = {
'web-runtime-cjs-dev': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.common.dev.js'),
format: 'cjs',
env: 'development',
banner
}
}
resolve()函数接收一个参数，在entry中base取/前面第一个值web，p.slice(base.length + 1)返回entry-runtime.js
在dest中base取值dist，在alias.js里没有dist，于是直接返回当前目录（__dirname）的大目录('../')，找到vue.runtime.common.dev.js文件
// scripts/config.js
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)
}
}
aliases()函数在alias.js文件最后导出一个对象，对象里有很多key，通过resolve()函数返回字符串，字符串是一个目录，resolve()调用了path.resolve()，path.resolve()是node.js提供的一个路径解析的方法，__dirname是指当前的目录，并往上去找一级，找到大目录，再传参数p
因此alias.js文件是提供了一个到最终真实文件地址的一个映射关系
// scripts/alias.js
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')
}
format
format属性表示构建的格式，cjs表示构建出来的文件遵循 CommonJS 规范，es表示构建出来的文件遵循 ES Module 规范。umd表示构建出来的文件遵循 UMD 规范。
// dist/vue.runtime.esm.js
export default Vue;
// dist/vue.runtime.common.js
module.exports = require('./vue.runtime.common.dev.js')
// dist/vue.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
banner
可以知道版本、创建者、License情况
// scripts/cofig.js
const banner =
'/*!\n' +
`* Vue.js v${version}\n`+
`* (c) 2014-${new Date().getFullYear()} Evan You\n`+
' * Released under the MIT License.\n' +
' */'
// dist/vue.min.js
/*!
* Vue.js v2.6.14
* (c) 2014-2021 Evan You
* Released under the MIT License.
*/
genConfig()
回到scripts/cofig.js中，数组调用genConfig()函数：
opts：genConfig获取key，opts是builds中key对应的对象
config：构造一个新的config对象，这个对象的数据结构才是真正的 Rollup 对应的配置结构，entry只是我们自己定义的entry，但是在 Rollup 中是叫input。所以config是 Rollup 最终要的配置。
总的来说就是我们将builds经过映射和转化生成 Rollup 最终需要的配置，他也是一个数组。最终生成的数组返回到build.js文件下。
// scripts/cofig.js
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)
}
}
}
}
（3）对配置进行过滤，过滤掉我们不需要的，就剩下我们需要编译的这样就可以构建出不同用途的 Vue.js 了
process.argv[2]对应的是package.json文件下的-- weex、-- web，如果有这些参数就会通过filter把之前不需要打包的过滤掉，如果没有参数就把weex给过滤掉。
// scripts/build.js
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
})
}
（4）调用build()函数做真正的构建过程
build()函数定义了一个next()方法，在next()方法执行的时候调用buildEntry()以及计数器built。
// scripts/build.js
build(builds)
function build (builds) {
let built = 0
const total = builds.length
const next = () => {
buildEntry(builds[built]).then(() => {
built++
if (built < total) {
next()
}
}).catch(logError)
}
next()
}
buildEntry()拿到了builds的config，config就是 Rollup 最终编译需要的config，config编译完就拿到了bundle，bundle通过generate()产生output，output对应生成的目标。可能会对code进行修改，比如判断是否要压缩的js，isProd的定义是文件以min.js结尾，就再做一次terser.minify压缩，最终调用write()方法最终生成到 dist 目录下。
// scripts/build.js
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) {
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)
}
})
}
个人理解：就是 执行代码和定义代码一般写在 js 文件的上面，方便看执行过程，所以 function 一般写在 js 文件的后面部分。
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
