通过学习项目是如何build的，会有利于我们更好的了解整个项目的代码结构。以便于更好的学习项目的各个模块。
打开package.json，来看看项目构建的script是何样子的。
"build": "node build/build.js",
"build:ssr": "npm run build -- vue.runtime.common.js,vue-server-renderer",
"build:weex": "npm run build -- weex-vue-framework,weex-template-compiler",
从名字大概就能看出这些build脚本的用途了。我们现在应该关注的就是 node build/build.js 这条命令到底干了什么？
OK，没说的，直接打开build/build.js文件来寻找答案。
文件内容很简单，很容易读懂。
- 首先就是看看有没有dist文件夹，没有就创建一个
- 在config文件中读取所有的build任务配置信息
- 根据命令行参数对上面读取的build任务进行一下过滤
- 然后遍历build任务列表，依次进行build
那具体是如何完成一个build任务的呢？文件中的 buildEntry 和 write 两个函数就是了。
结合上面提到的config文件，我们可以有以下理解：
- config中定义了一个builds对象，里面包含了一大堆的配置信息（entry，dest，format等）。形如：
// Runtime+compiler development build (Browser) 'web-full-dev': { entry: path.resolve(__dirname, '../src/entries/web-runtime-with-compiler.js'), dest: path.resolve(__dirname, '../dist/vue.js'), format: 'umd', env: 'development', alias: { he: './entity-decoder' }, banner },
- 通过一个 getConfig 函数，我们会得到一个形如下面的配置对象
{ "entry":"/vue-master/src/entries/web-runtime-with-compiler.js", "dest":"/vue-master/dist/vue.js", "format":"umd", "banner":"/*!\n * Vue.js v2.1.8\n * (c) 2014-2017 Evan You\n * Released under the MIT License.\n */", "moduleName":"Vue", "plugins":[ { "name":"replace" }, { "name":"flow-remove-types" }, { "name":"buble" } ] }
- 有了build的配置对象，就可以将其传递给 buildEntry 函数来完成这个build任务了。 buildEntry 函数之中使用了 rollup 这个第三方的打包工具来对code进行打包。
rollup是什么呢？ 马上前往npmjs.com打探一下。
OK， 得到以下比较有用的信息：
- Next-generation ES6 module bundler ，下一代ES6 模块打包工具
- rollup提供Javascript API 和 命令行接口
- rollup有何魔力。
- 现有的模块打包工具Browserify和Webpack在require模块时，会引入整个模块（其中包含了大量你用不到的代码）。
- ES6的模块系统可以解决这个问题， 使用
import { ajax } from 'utils';只引入 ajax 功能，而不引入整个 utils，rollup会静态地分析代码和依赖，来确保最小打包。 更多详细情况请参考 https://github.com/rollup/rollup
好吧，有了以上知识，我们就明白了 entries 目录下面的文件是用来干什么的了。
它们就是打包工具的入口，rollup从它们开始分析代码的依赖并进行打包。
那么我们的关注点终于切到代码了，以上面提到的build配置信息为例，我们下面来分析 src/entries/web-runtime-with-compiler.js 这个entry文件了。
