共计 1065 个字符，预计需要花费 3 分钟才能阅读完成。
了解 Vue 的构建，可以从 package.json 文件开始 sprits 命令内关于构建的命令如下
{
…
“build”: “node scripts/build.js”, // web 版本
// sever
“build:ssr”: “npm run build — web-runtime-cjs,web-server-renderer”,
// weex
“build:weex”: “npm run build — weex”
…
}
从命令看出:
vue 是通过 rollup 来进行构建的同样的构建工具 webpack 更强大一些，可以处理图片、css、js 等；但是 rollup 只做 js 的处理，相比之下更轻量, 所以 rollup 更适合 js 框架的打包
总共有三个版本的构建从 web 版本的为起点来了解，Web 版本的构建命令实际执行的是 scripts/build.js build 文件的整个核心内容是 build 方法
et builds = require(‘./config’).getAllBuilds()
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 {
//. 如果没有参数就把 weex 给过滤掉
builds = builds.filter(b => {
return b.output.file.indexOf(‘weex’) === -1
})
}
build(builds)
得到的整个的构建流程是:
读取./config 配置文件中的配置，再根据命令行中输入的参数，exports.getAllBuilds = () => Object.keys(builds).map(genConfig)// Object.keys(builds) 对象 key 的数组：对应 val 的是不同版本的编译配置 // genConfig 配置 rollup 构建的参数格式
其中 getAllBuilds 方法返回的是一个对象数组
去到这些配置中进行过滤, 拿到对应的版本编译所需要的 config, 传入到 buildEntry 方法去执行 rollup 编译
rollup 在.then 内执行输出的文件地址，以及代码压缩配置
其中 config 里的 format 构建格式
最后 config 文件最后导出的是遵循 rollup 构建规则的所需要的数组对象
其中的别名配置暂不做分析，具体代码在 scripts/alias 中，