了解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中,