[译]👁js 模块入门教程（二）

第一部分，我们说了什么是模块，为什么开发者需要它，和多种在项目种运用的方式。

我们在第二部分主要讲打包模块：为什么打包，打包的不同方式，web 开发模块的未来。

什么是模块打包？

模块打包是把各个模块及相关依赖按正确的顺序打包到单（或组）文件的一个简单的过程。

对于开发者，细节是魔鬼。

究竟为什么要打包？

当你把项目分成模块，你通常会组织不同模块到的文件、文件夹。你会用一组 libraries 模块，如 Underscore 或 React. 结果是，在主 HTML 中，用到的每个文件都要用 <script> 标签的方式引入。当用户访问，每个文件有不同的 <script> 意味着浏览器需要逐个加载文件，这是很耗时的。

为了解决问题，我们打包或者说串联所有的文件成一个大文件（也可以是几个文件）从而减少请求。这就是开发口中的"打包"步骤（过程）。另一个提速的常用方法是，删除不必要的特性（比如，空白、注释、新行字符等）来"缩小"打包的代码，从而在不更改代码功能的情况下减少总体的体积。

数据越少，浏览器处理时间越短，从而减少下载文件的时间。如果你见过 "min" 的扩展名，如 underscore-min.js 。你可以会发现压缩版比起完整版是非常小且读不懂的。

Gulp 和 Grunt 的任务就是串联和最小化代码，给开发者展示可读的代码，给浏览器处理打包后的代码。

不同打包方式的区别

有了前面文章的介绍，用标准模块模式去定义我们的模块后再最小化和串联起文件是很容易的。你只需要把 js 代码打包到一起。

但是，你用 无原生 模块系统，浏览器不能解析 CommonJS 或者 AMD（数组是原生 ES6 模块格式）。你需要特殊的工具去把你的模块转换成顺序正确、浏览器友好的代码。这就是 Browserify, RequireJS, Webpack, 和其他模块打包或模块加载工具的作用。让我们来看几个常见的打包方法。

打包 CommonJS

前面文章说过，CommonJS 是同步的，并不是为浏览器设计的。有个解决办法 -- Browserify.他是在浏览器编译成 CommonJS 模块的工具。举个例子：你的 main.js 文件引入个计算器来计算给定数组平均值。

var myDependency = require(‘myDependency’);

var myGrades = [93, 95, 88, 0, 91];

var myAverageGrade = myDependency.average(myGrades);

上例中，我们有 myDependency 的依赖，并在后面用到。Browserify 递归导报所有需要的模块，从 main.js 开始i，打包进叫 bundle.js 单个文件。

browserify main.js -o bundle.js

Browserify 通过跳到每个 require 的调用并解析 AST 来阻止整个依赖图的构建。一旦找到依赖是怎么构建的，它会用正确的顺序把依赖们打包成单文件。接下来，我们只需要插入把打包后的 bundle.js 用 Githubissues.

Githubissues is a development platform for aggregating issues.

MJingv / jehol-person-blog