VueJS学习之旅 02

通过学习项目是如何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文件了。

VueJS学习之旅 02

推荐阅读更多精彩内容