构建的分类

Vue 有三种不同的构建输出，分别是：UMD、CommonJS 以及 ES Module。

找到github上的vue的源码，打开 scripts/config.js 文件（https://github.com/vuejs/vue/blob/dev/scripts/config.js），可以看到如下内容：

script代码部分内容

从源码中可看出，构建输出的种类共有22种。这22种构建输出的名称的不同分类：

一、使用场景和输出类型可以分为以下几类：

1.输出cjs（Common.js module）

2.输出esm（ECMAScript module）

3.输出umd (UMD module)

4.compile

5.weex

二、根据入口可以分为以下几类：

1. 客户端渲染

>>> entry: resolve('web/entry-runtime.js')

>>> entry: resolve('web/entry-runtime-with-compiler.js'),

>>> entry: resolve('web/entry-compiler.js'),

2. 服务端渲染

>>> entry: resolve('web/entry-server-renderer.js'),

>>> entry: resolve('server/webpack-plugin/server.js'),

>>> entry: resolve('server/webpack-plugin/client.js'),

3. weex渲染

>>> entry: resolve('weex/entry-runtime-factory.js'),

>>> entry: resolve('weex/entry-framework.js'),

>>> entry: resolve('weex/entry-compiler.js'),

本文内容主要针对客户端渲染（即一般前后端分离项目常见应用场景）来分析。

三、根据场景分类：

从客户端渲染来看，每种模块形式又分别输出了 运行时版（runtime） 以及 完整版（full）。

以es输出为例，如下图：

runtime和full

从上图可以看出，full版本比runtime的entry多了一个“-with-compiler”。从字面意思可以看出，full的版本多了编译i的过程，即它的作用是：编译器代码的存放目录，将 template 编译为 render 函数。

为什么要分运行时版与完整版？首先你要知道一个公式：运行时版 + Compiler = 完整版。这也就意味着compiler是可以独立出来的，也就是在运行时版本中，compiler的这一部分工作被单独拿出来，在构建过程中已经完成了，无需再等到运行时再执行。因此运行时版本（runtime）本身不再包含compiler的内容。

而完整版存在的意义又是什么呢？很简单，当你不想再执行前就compile，而是需要再运行过程中实现编译，full版本就被需要了，可以在不配合构建工具的情况下直接使用。但是更多的时候，推荐你配合构建工具使用运行时版本。

那么， cjs、es 和 umd这种不同输出类型的包，意义又在哪呢？为什么不统一输出内容的类型呢？（上文中的format）在了解原因前，我们先看下一part的内容，了解模块化打包的相关概念。

构建的模块

在来了解集中输出类型前，我们先了解下模块的概念。

模块：简单理解就是JS的对象化，比如可写个event事件模块接口。模块返回一个匿名函数，有的返回给一个变量，有的暴露自己，如jQuery暴露自己给window对象。又如SeaJS，它一开始就将接口公开了。this.seajs = { _seajs: this.seajs }; /*Base namespace for the framework. */

如果我们运用了“模块化”的思想来开发，但如果没有统一的语法格式来写模块且各种各样的风格来写模块而使代码乱套。这时一些组织出现了，最具代表的如CommonJS ，AMD 。此外ECMAScript 也开始着手模块的标准化写法。无论它们提供什么样的写法，我们需要的仅仅是：

1. 将一些零散代码封装成一个有用的单元（encapsulate）

2. 导出模块的接口API（exports）

3. 方便友好引用其它模块（dependency）

一、CommonJS ：

在服务器端运行的JS有NodeJS，他遵循了一个称为CommonJS的规范。CommonJS其中就有对写模块的标准化。当然模块化只是其中的一部分而已。

以服务器端为第一（server-first）的原则发展，选择同步加载模块。它的模块是无需包装的（unwrapped modules）且贴近于ES.next/Harmony的模块格式。但它仅支持对象类型（objects）模块。

·CommonJS module的基本要求如下：

1. 标示符require为一个函数，require(string)

2. require方法返回指定的模块API；

3. 如果存在依赖的其它模块，那么依次加载；

4. require不能返回，则抛出异常；

5. 仅能使用标示符exports导出API

二、AMD

为实现与NodeJS相同方式的模块写法，大牛们做了很多努力。但由于浏览器环境不同于服务器端，它的模块有一个HTTP请求过程。这个请求过程多数使用

【vue】源码解析（1）构建输出