[译]webpack相关概念： CommonJS与AMD

CommonJS

CommonJS通过定义模块格式，并确保在命名空间内每一个模块的执行来解决JavaScript作用域的问题。
其通过强制模块输出它们想要对外暴露的变量来实现，也通过定义其他正常工作所需模块来实现。
因此CommonJS提供了两个工具：

1. 用来实现在当前作用域内引入一个已存在模块的require()方法

2. 用来实现在当前作用域中输出的module对象

直接用JavaScript实现

不使用CommonJS的实现:

我们在名为salute.js的脚本文件中定义一个变量。该脚本仅包含一个将被其他脚本使用到的变量。

// salute.js
var MySalute = "Hello";

现在，在名为world.js第二个文件中，我们将使用在salute.js中定义的变量。

// world.js
var Result = MySalute + " world!";

现在让我们用CommonJS的来实现 hello world ：

模块的定义

由于world.js只有在MySalute定义后才能作用，因此需要把每个脚本定义为模块：

// salute.js
var MySalute = "Hello";
module.exports = MySalute;

// world.js
var Result = MySalute + "world!";
module.exports = Result;

如上，我们使用特殊的object模块并通过在module.exports引用变量，这样CommonJS模块系统就会知道模块中的对象是我们想要输出的。就像salute.js中暴露的MySalute，world.js中暴露的Result。

模块的依赖

虽然我们离目标近了一步，但我们还缺少一个步骤即依赖的定义。我们已将每个脚本定义为独立的模块，但在world.js还需要知道是哪个模块定义了MySalute：

// salute.js
var MySalute = "Hello";
module.exports = MySalute;

// world.js
var MySalute = require("./salute");
var Result = MySalute + "world!";
module.exports = Result;

请注意，当require时，这里并没有使用文件全名salute.js而是使用./salute ， 所以你可以删去脚本文件的扩展名。./符号意味着salute模块与world模块在同一目录下。

实例

函数

// moduleA.js
module.exports = function( value ){
    return value*2;
}

// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2( 4 );

AMD

AMD(全称：异步的模块定义)因其天然的异步性，被作为一种在浏览器环境中模块系统的解决方案（由于CommonJS模块系统是同步的而不适合使用在浏览器环境）。

AMD为模块化的JavaScript定义了一个标准：即模块可以异步加载其依赖，因而解决了同步调用产生的问题。

规则

使用define函数来定义模块

define

define函数描述了在AMD中模块是怎样定义的。其形如：

define(id?: String, dependencies?: String[], factory: Function|Object);

id

可选参数，用来规定模块的名称。

dependencies(依赖)

该参数规定了被定义模块有哪些依赖。它是由模块id组成的数组。这是一个可选参数，当未定义时将使用默认值[“require”, “exports”, “module”]。

工厂

最后一个参数将定义此模块的行为。其值可以是一个函数（因被调用一次）也可以是一个对象。 如果定义为工厂函数，那么返回值将被作为模块的出口暴露出来。

例子

下面是一些例子：

具名模块

定义一个依赖jQuery的具名模块myModule。

define('myModule', ['jquery'], function($) {
    // $ is the export of the jquery module.
    $('body').text('hello world');
});
// and use it
require(['myModule'], function(myModule) {});

注意：在web pack中一个具名模块只是一个本地变量，而Require.js中一个具名模块是一个全局变量。

匿名模块

定义一个莫有id的匿名模块

define(['jquery'], function($) {
    $('body').text('hello world');
});

多个依赖

定义一个有多个依赖的模块。需要注意的是，每个依赖的出口都将作为参数传给工厂函数。

define(['jquery', './math.js'], function($, math) {
    // $ and math are the exports of the jquery module.
    $('body').text('hello world');
});

出口

定义一个将自身作为出口暴露出来的模块

define(['jquery'], function($) {

    var HelloWorldize = function(selector){
        $(selector).text('hello world');
    };

    return HelloWorldize;
});

使用require加载依赖

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});