RequireJS-CommonJS-AMD-ES6 Import/Export詳解
為什麼起了一個這個抽象的名字呢，一下子提了四個名詞分別是：RequireJS，CommonJS，AMD，ES6，答案是因為現實很骨感，我們必須很勇敢才能正視這一段悲催的往事。如今的JavaScript平台正值如日中天，大家可能會忽略他的過去和弊端，這些弊端中一直被人诟病的就是JavaScript的包管理，比如類似Java中的import，其實理論上來講這種基本元素的缺失大大的阻礙了人們對一種語言的認可，認為他難以擔當大任，其實這麼多年來JavaScript平台的發展主要還是他存在的位置比較有利，在浏覽器中，有標准的支持和約束，跨平台等等，但是這種先天不足就沒辦法了，只能後天努力，這樣從ES3-ES6不斷地加入新的功能終於使JavaScript這門語言逐漸完備，這個漫長的過程讓我們逐漸的明白了一個道理：社會的需求勝過十駕馬車的力量可以催生一項技術不斷的完善，進步。
正如前面提到的JavaScript沒有包管理，不適合構建復雜應用，但是現實是就需要用JavaScript來構建復雜應用，因為隨著社會的進步，人們對web應用的期許提高了，這都難不倒工程師，不是語言不提供麼，我們有work around。先來說說CommonJS，
CommonJS的出發點是讓JavaScript這門語言寫出的代碼可以跨前後端，（當然這裡面指的是邏輯代碼，不包含DOM, BOM操作）也就是可以在不同的宿主上跑，不如同一段代碼可以跑在NodeJS也可以跑在Nashorn或者浏覽器，但是事實上對CommonJS標准應用最多的是NodeJS平台，也就是NodeJS中的Require, 那麼CommonJS Require為什麼沒有在浏覽器裡流行呢，主要原因是這個Require是同步的，這個浏覽器接受不了，用戶體驗差，下面我們來說說浏覽器中的AMD。
// sum.js
module.exports = {
sum: function(a, b) { return a + b; }
};
// app.js
var assert = require('assert');
var cal = require('./sum');
assert.equal(3, cal.sum(1, 2));
CommonJS在浏覽器中不行我們再找一個方式，總會有適合的，下面我們來說說AMD (Asynchronous Module Definition) 對CommonJS稍加改變，構造一個異步的變種就得到了AMD，示例代碼如下，這下變成異步的了，終於可以在浏覽器中使用了
// sum.js
define("sum", function() {
return {
sum: function(a, b) { return a + b; }
};
});
// app.js
define("app", ["sum"], function(cal) {
console.log(cal.sum(1, 2)); // => 3
});
但是以上的代碼直接寫是沒辦法運行的，如果想在浏覽器中直接運行，需要知道define是個什麼鬼，所以需要先把RequireJS引入，這就是RequireJS的作用，在浏覽器中實現define, 引入依賴包。
<script data-main="scripts/main" src="scripts/require.js"></script>
// main.js
requirejs.config({ baseUrl: '/scripts' });
requirejs(['app']);
看著這種不一致的痛苦ECMAScript 6終於忍不了了，加入了import/export標准來統一JavaScript世界，這就是標准的力量，但是從語法上來看還是同步的加載，還是沒有辦法支持浏覽器，不知道這塊ECMAScript 6是怎麼考量的。
// sum.js
export function sum(a, b) { return a + b; }
// app.js
import * as cal from 'sum';
console.log(cal.sum(1, 2)); // => 3
綜合以上的分析，在ES6還沒有實現完成的今天如果想寫一段同時支持前後台，支持AMD， CommonJS的代碼要想下面這個樣子。
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
module.exports = exports = factory(require("./core"), require("./cipher-core"));
}
else if (typeof define === "function" && define.amd) {
// AMD
define(["./core", "./cipher-core"], factory);
}
else {
// Global (browser)
factory(root.CryptoJS);
}
}(this, function (CryptoJS) {
return CryptoJS.pad.Pkcs7;
}));
總結
本文總結了RequireJS，CommonJS，AMD，ES6 import/export的前世今生，並且對每個部分給出了完整的代碼樣例，希望對大家有所幫助。