你是否是 JavaScript 新手？并且对模块，模块加载器和模块打包器感到困惑吗？或者你已经编写了一段时间的 JavaScript ，但是没法掌握模块的一些术语？你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语，但是不理解我们为什么需要它们？
我会试着解释他们是什么，他们试图解决什么问题，以及他们如何解决这个问题。
示例应用程序
image
(该图为应用程序运行界面)
在这篇文章中，我将使用一个简单的 web 应用程序来演示模块的概念。应用程序在浏览器中显示数组的和。该应用程序由4个函数和一个 index.html 文件组成。
image
(该图为函数的依赖示意图)
main 函数计算数组中数字的和，然后把答案显示在 span#answer 中。sum 函数依赖于两个函数：add 和 reduce。add 函数做它名字所做的操作；把两个数相加。reduce 函数遍历数组，并且调用 iteratee 回调函数。
花点时间理解下面的代码。我将会重复多次使用相同的函数。
1.
2.
3.
4.
5.
6. JS Modules
7.
8.
9.
10. The Answer is
11.
12.
13.
14.
1. // 1-main.js
2. var values = [ 1, 2, 4, 5, 6, 7, 8, 9 ];
3. var answer = sum(values)
4. document.getElementById("answer").innerHTML = answer;
JavaScript 代码:
1. // 2-sum.js
2. function sum(arr){
3. return reduce(arr, add);
4. }
JavaScript 代码:
1. // 3-add.js
2. function add(a, b) {
3. return a + b;
4. }
JavaScript 代码:
1. // 4-reduce.js
2. function reduce(arr, iteratee) {
3. var index = 0,
4. length = arr.length,
5. memo = arr[index];
6. for(index += 1; index < length; index += 1){
7. memo = iteratee(memo, arr[index])
8. }
9. return memo;
10. }
我们来看看如何把这些代码片段整合在一起，来构建一个应用程序。
使用内嵌脚本
内嵌脚本就是在 标记之间添加 JavaScript 代码。这是我开始学 JavaScript 时的做法。我相信大多数 JavaScript 开发者在其生命中至少做过一次这样的事情。
这是一个很好的入门办法。没有外部文件或依赖关系需要担心。但是这也导致了不可维护的代码，因为：
- 缺乏代码可重用性：如果需要添加另一个页面，需要从这个页面中获得一些函数，我们就不得不复制粘贴代码。
- 缺乏依赖解析：你必须保证 main 函数之前已经添加了 add、reduce 和 sum 函数。
- 全局命名空间污染：所有的函数和变量将都将驻留在全局作用域中。
HTML 代码:
1.
2.
3.
4.
5.
6. JS Modules
7.
8.
9.
10. The Answer is
11.
12.
14.
35.
36.
Script 标签引入 JavaScript 文件
这是从嵌入脚本的一个自然过渡。现在我们将大段的 JavaScript 分成更小的代码片段，并用
15.
16.
17.
18.