build打包后怎么查看源码 vue_vue2源码解析一：打包与构建流程

本系列文章，基于vue 2.6.11进行解析，不追究每行代码分析清楚，但求把握大体的重点，比如源码构建流程；如何实现数据双向绑定；如何解析模板；如何解析一个组件的data，method，computed等属性；如何实现在weex，web等多场景下运行。理解有限，有问题希望指正。

我们拿到源码，其实一般有两个着手点

1. 从代码执行的入口，比如vue执行，一般是 new Vue() 一个实例出来，所以直接在代码中搜索vue的类的定义，就是入口了。
2. 从代码构建的入口，我们一般执行 npm run build进行构建，那么就要看package.json文件。

本篇先看看代码构建：

...
{
    
"build": "node scripts/build.js",    //打包web端vue
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",  //打包ssr版vue
"build:weex": "npm run build -- weex",   //打包weex版vue
}
...

我们看到scripts属性中的build，由于vue支持在web，weex，server几个环境中使用，所以有三种build指令， 都会执行build.js。

let 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 {
    
  builds = builds.filter(b => {
    
    return b.output.file.indexOf('weex') === -1
  })
}

build.js会先从config文件中读取所有的配置， 然后根据入参过滤出对应的配置，可以看到如果是执行 npm run build, 会取出除weex以外，所有的配