Vue版本2.6.11。首先,要分析任何库的源代码,都必须从它的package.json开始分析。脚本工具流程分析:构建命令"build":"nodescripts/build.js",我们可以看到在vue源码中运行package.json中的构建命令其实相当于运行script/build.js。定位到script/build.js,可以看到build.js引入了很多相关的模块,先不关注。注意下面这段代码//这里的构建是通过getAllBuilds()方法获取的//执行构建命令时,需要打包的所有vue版本letbuilds=require('./config').getAllBuilds()getAllBuilds()到底是什么//config最底层导出了这个方法。exports.getAllBuilds=()=>Object.keys(builds).map(genConfig)寻找builds和genConfigfirstbuilds在代码中可以看到这样一个objectconstbuilds={//Runtimeonly(CommonJS)。由捆绑器使用,例如webpack&Browserify//builds中的每一个对象都代表了每一个不同版本的vue需要打包'web-runtime-cjs-dev':{//resolve方法定义在config中//有兴趣的朋友可以去看看,其实是通过alias获取到对应的路径//entry表示需要打包的入口文件的路径entry:resolve('web/entry-runtime.js'),//dest表示构建打包导出的路径dest:resolve('dist/vue.runtime.common.dev.js'),//format表示模块,比如AMD,CMD,ESModulesformat:'cjs',//modeenv:'development',//banner其实就是打包代码生成的一些注释~~~~banner},'web-runtime-cjs-prod':{entry:resolve('web/entry-runtime.js'),dest:resolve('dist/vue.runtime.common.prod.js'),format:'cjs',env:'production',banner},//Runtime+compilerCommonJSbuild(CommonJS)'web-full-cjs-dev':{entry:resolve('web/entry-runtime-with-compiler.js'),dest:resolve('dist/vue.common.dev.js'),格式:'cjs',env:'development',别名:{he:'./entity-decoder'},banner},...]genConfig()...constconfig={input:opts.entry,external:opts.external,插件:[flow(),alias(Object.assign({},aliases,opts.alias))].concat(opts.plugins||[]),output:{file:opts.dest,format:opts.format,横幅:opts.banner,名称:opts.moduleName||'Vue'},onwarn:(msg,warn)=>{if(!/Circular/.test(msg)){warn(msg)}}}。..returnconfig关于genConfig函数,我们可以看到builds对象中的内容其实是改成了roolup打包工具可以识别的格式,然后返回。所以可以看到build.js中得到的builds对象其实就是一个rollup,可以打包。vue的各种配置版本的数组。过滤仔细阅读代码我们可以发现,在运行build方法之前,对构建进行了一层逻辑处理,根据process.argv[2]进行过滤。这段代码的意思基本上就是根据脚本运行脚本中的参数,然后筛选出相关的vue版本。如果(process.argv[2]){constfilters=process.argv[2].split(',')builds=builds.filter(b=>{returnfilters.some(f=>{console.log(b.output,'b.output');console.log(b._name,'_name');console.log(b,'b');//过滤找到匹配对应参数的returnreturnb.output.file.indexOf(f)>-1||b._name.indexOf(f)>-1})})}else{//默认过滤掉weex构建builds=builds.filter(b=>{returnb.output.file.indexOf('weex')===-1})}最后调用build方法封装逻辑。
