如果您觉得该文档对您有帮助，请打赏，五毛十毛均可。另外，转载请注明作者及出处。

Web 应用程序已经变得非常复杂，我们需要用项目构建工具来应对这种复杂性，处理各种可能遇到的问题

模块系统的标准问题

目前模块系统有几种不同的标准：

• <script> 标签 (没有模块系统)
• CommonJS
• AMD
• ES6 模块
• 其他

<script> 标签

使用 <script> 标签，可以在没有模块系的情况下，对代码进行简单的管理，之前我们都是这样做的：

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

各个模块中的接口都会被导入到全局对象中，比如 window 对象；这样就可以在任何地方通过全局对象访问这些接口

问题：

• 可会能引发冲突
• 加载顺序难以管理
• 依赖问题难以管理
• 引入的脚本会非常多，难以阅读和理解

CommonJs 标准：同步 require

创建模块的时候，通过给 exports 对象添加属性和方法，或者通过给 module.exports 设置值来定义模块的接口。

引用的时候，使用同步 require 方法导入模块的接口。

//导入模块
require("module");
require("../file.js");

//创建模块接口
exports.doStuff = function() {};
module.exports = someValue;

这种方法常常被用在服务端的 node.js 程序中。

优点

• 在服务端，模块可以被重用
• 已经有大量这样的模块，通过 npm 管理
• 简单

缺点

• 因为是同步导入模块，会导致程序挂起，不适用于网络应用
• 不能并行导入多个模块

实现

• node.js 用在服务端
• browserify
• modules-webmake 编译成一个包
• wreq 用在客户端

AMD 标准：异步 require

AMD 标准中，定义模块和导入模块的方式与 CommonJs 是不一样的

//导入模块
require(["module", "../file"], function(module, file) { /* ... */ });

//定义模块
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

优点：

• 适用于网络应用
• 可以并行导入多个模块

缺点：

• 编码复杂，阅读和书写都很困难
• 有很多替代方法

实现：

• require.js 客户端
• curl 客户端

ES6 模块

EcmaScript6 从语言层面内建了模块系统

import "jquery";
export function doStuff() {}
module "localModule" {}

优点：

• 行业标准

确定：

• 目前很多浏览器还不支持 ES6
• 目前很少有模块使用这种方式

最佳方式

能够让开发者自己选择模块标准，即时可以使用已经存在的代码库，也能容易的添加自己定义的模块。

传输问题

如果想让模块在客户端执行，必须通过网络从服务端将他们传输过来。极端情况下，会出现下面这两种情况：

• 为每个模块发送一个请求
• 所有模块只用一个请求

通常，我们两种情况都会遇到，两种情况都存在一些问题：

• 每个模块一个请求

  • 优点：只请求需要的模块
  • 缺点：会有很多请求，造成性能问题

• 所有模块一个请求

  • 优点：请求少，不会造成性能问题
  • 确定：会引入很多无用的模块

折中方式

折中的方式是：将所有模块编译成几个小的分块，减少了请求数量，也减少了无效的引用

资源管理问题

当前的 Web 引用已经很复杂，除了 Javascript ，还有其他各种资源需要引入：

• stylesheets 样式表
• images 图片
• webfonts 字体
• html 模板
• 其他

除此以外，还有一些翻译转换工作

• coffeescript → javascript
• elm → javascript
• less stylesheets → css stylesheets
• jade templates → javascript which - generates html
• i18n files → something
• 其他

我们希望能像下面这样引入资源

require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

依赖管理问题

现代 Web 应用会导入很多外部依赖，管理起来非常困难，特别是某些依赖还是以表达式的形式出现，比如

require("./template/" + templateName + ".jade")

除此以外，还有很多其他稀奇古怪的形式。

策略

一个优秀的解析器可以让使用各种古怪依赖管理的代码正常运行。