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