Vue版本2.6.11。

首先，剖析任何库的源码肯定是从它的package.json中进行剖析。

script工具流剖析: build命令

"build": "node scripts/build.js",
咱们能够看到实际上在vue源码中的package.json中运行build命令其实就是相当于运行script/build.js。

定位script/build.js

咱们能够看到build.js中引入了很多相干模块，这些咱们先不去关注。
留神上面这段代码
// 这里的builds 就是通过getAllBuilds()办法失去// 执行build命令的时候所有须要打包的vue版本let builds = require('./config').getAllBuilds()
  • getAllBuilds()它到底是什么
// config最底部导出了这个办法。exports.getAllBuilds = () => Object.keys(builds).map(genConfig)

  • 寻找builds和genConfig

    1. 首先builds在代码中能够看到这样一个object

      const builds = {// Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify// builds中每个对象就示意vue须要打包的每个不同的版本'web-runtime-cjs-dev': {    // 对于resolve办法在config中有定义    // 感兴趣的敌人能够去看看，它其实就是通过aliaes取得对应的门路        // entry示意须要打包的入口文件门路    entry: resolve('web/entry-runtime.js'),    // dest示意构建打包进口的门路    dest: resolve('dist/vue.runtime.common.dev.js'),    // format示意模块，就比方AMD，CMD，ESModules    format: 'cjs',    // 模式    env: '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+compiler CommonJS build (CommonJS)'web-full-cjs-dev': {    entry: resolve('web/entry-runtime-with-compiler.js'),    dest: resolve('dist/vue.common.dev.js'),    format: 'cjs',    env: 'development',    alias: { he: './entity-decoder' },    banner},... ]

    2. genConfig()

      ...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)  }} }...return config
对于genConfig函数咱们能够看到其实就是将builds对象里的内容变成roolup打包工具能够辨认格局而后进行return。
所以能够看到在build.js中拿到的builds对象其实就是rollup能够打包的各种不同配置vue配置版本组成的一个Array。
  • 过滤
仔细阅读代码，咱们能够发现在运行build办法之前会对builds进行一层依据process.argv[2]进行过滤的逻辑解决。
这段代码的意思根本大抵就是依据script运行脚本中的参数而后进行过滤出相干的vue版本。
if (process.argv[2]) {  const filters = process.argv[2].split(',')  builds = builds.filter(b => {    return filters.some(f => {      console.log(b.output,'b.output');      console.log(b._name,'_name');      console.log(b,'b');      // 过滤找到匹配对应参数的retrun      return 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办法进行逻辑的打包。