关于vue.js:Vue源码构建过程

31次阅读

共计 2200 个字符，预计需要花费 6 分钟才能阅读完成。

Vue 版本 2.6.11。

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

"build": "node scripts/build.js",

咱们能够看到实际上在 vue 源码中的 package.json 中运行 build 命令其实就是相当于运行 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

首先 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
},
... ]

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
  })
}