[译]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');
});