补充对Vue不同构建输出的讲解

了解Vue这个项目.md

@@ -1,5 +1,7 @@
 ## 了解 Vue 这个项目
 
+#### 目录及文件
+
 正如 [前言](./前言.md) 中介绍的那样，你可以把 Vue 的源码 clone 到本地，也可以安装方便在线查看GitHub仓库代码的 Chrome 扩展，总之我们首先要做的事情就是先把 Vue 源码的目录结构都弄清楚，每个文件的作用是什么，Vue 是如何规划目录的等等。
 
 详细目录介绍如下：
@@ -49,4 +51,37 @@
 ├── .gitignore ---------------------------- git 忽略配置
 ```
 
-对于上面对目录和文件的描述也许你一眼看上去一头雾水，还是不理解他在干什么，没关系，这是正常的，在你没有深入到源码之前，仅仅凭借几句话就理解这个文件的作用是不可能的，所以不要灰心，只需要有个大概印象就可以了，混个眼熟。
+对于上面对目录和文件的描述也许你一眼看上去一头雾水，还是不理解他在干什么，没关系，这是正常的，在你没有深入到源码之前，仅仅凭借几句话就理解这个文件的作用是不可能的，所以不要灰心，只需要有个大概印象混个眼熟就可以了。
+
+#### Vue 的不同构建输出
+
+##### 从 Vue 的构建配置了解其不同的构建输出
+
+如果按照输出的模块形式分类，那么 Vue 有三种不同的构建输出，分别是：`UMD`、`CommonJS` 以及 `ES Module`，我们可以在 Vue 的 Rollup 构建配置中得知，打开 `build/config.js` 文件，如下图：
+
+![](http://ovjvjtt4l.bkt.clouddn.com/2017-08-31-vue-build-config1.png)
+
+上图中的三个构建配置的入口是相同的，即 `web/entry-runtime.js` 文件，但是输出的格式(`format`)是不同的，分别是 `cjs`、`es` 以及 `umd`。
+
+每种模块形式又分别输出了 `运行时版` 以及 `完整版`，如下图：
+
+![](http://ovjvjtt4l.bkt.clouddn.com/2017-08-31-130242.jpg)
+
+上图中，`cjs` 模块分别输出了 `运行时版` 以及 `完整版` 两个版本，`es` 模块也做了同样的事情，我们观察运行时版本与完整版本的区别：
+
+运行时的入口文件名字为：`entry-runtime.js`
+
+完整版的入口文件名字为：`entry-runtime-with-compiler.js`
+
+通过名字，我们就可以猜到，完整版比运行时版本多了一个传说中的 `compiler`，而 `compiler` 在我们介绍目录结构的时候说过，它的作用是：*编译器代码的存放目录，将 template 编译为 render 函数*。
+
+上图中只介绍了 `cjs` 与 `es` 版本的输出，对于 `umd` 模块格式的输出，同样也分为 `运行时版` 与 `完整版`，除此之外每个版本又分为 `生产环境` 与 `开发环境`，如下图：
+
+![](http://ovjvjtt4l.bkt.clouddn.com/2017-08-31-131849.jpg)
+
+##### 不同构建输出的区别与作用
+
+相比于知道 Vue 的不同构建输出，我们更关心的是：不同的构建输出有什么区别，为什么要输出这么多不同的版本，有什么作用？
+
+
+