在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我們應用到開發呢？目前比較流行的模塊化工具有RequireJS
、SeaJS等等。而且模塊化開發工具都有不同的規範去約束例如：AMD CMD CommonJS。
CommonJS
說道CommonJS，學習過Node的同學會比較熟悉，CommonJS是服務器模塊的規範，Node採用了這個規範。如果我們也想在瀏覽器中使用到CommonJS的規範的話，可以使用browserify。
下面用browserify做一個示例。首先需要安裝Node和npm（假設你已經安裝好了）：
npm install browserify -g
接着使用npm安裝browserify，記得要安裝到全局環境中。然後新建兩個js文件，分別是a.js和b.js。
// a.js
module.exports = function () {
console.log('This is a.js');
};
//b.js
var a = require('./a');
a();
console.log('This is b.js');
我們編寫好代碼之後，在命令行中運行:
browserify b.js -o bundle.js
node bundle.js // 運行 bundle.js
This is a.js // 輸出
This is b.js // 輸出
然後我們就發現了目錄下多了一個bundle.js的文件。這就是browserify根據我們寫的代碼最後編譯出來的。上面只是用了browserify拋磚引玉的介紹了一下如何在客戶端中CommonJS規範。
- 爲什麼要使用
CommonJS規範呢？
如果經常寫Node的同學可能會對CommonJS規範比較瞭解一些，上手比較容易。
外鏈
AMD
說道模塊化的話，大多數的同學都應該瞭解RequireJS，而且RequireJS是基於AMD規範的。下面也用一下小栗子來體驗一下RequireJS。新建兩個文件一個是a.js另一個是index.html。
a.js:
define(function () {
console.log('hello RequireJS!');
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script data-main="a.js" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js"></script>
</body>
</html>
接着用瀏覽器打開index.html，發現控制檯輸出了hello
RequireJS!。就表示已經成功了。上面只是一個非常簡單的栗子。體驗了一下RequireJS。
- 爲什麼要使用
AMD規範呢？
因爲AMD是專門爲瀏覽器中js環境設計的規範。它吸取了CommonJS的一些優點，但是沒有全部都照搬過來。也是非常容易上手。
外鏈
CMD
說道AMD的話，又會想起有個叫CMD的東西。而且SeaJS是推薦是用CMD的寫法，那麼就使用SeaJS來編寫一個簡單的栗子：
也是新建兩個文件，greet.js和index.html:
greet.js：
define(function (require, exports) {
function helloPython() {
document.write("Hello,Python");
}
function helloJavaScript() {
document.write("Hello,JavaScript");
}
exports.helloPython = helloPython;
exports.helloJavaScript = helloJavaScript;
});
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/seajs/2.3.0/sea.js"></script>
<script>
seajs.use(['./greet'], function (Greet) {
Greet.helloJavaScript()
});
</script>
</body>
</html>
看到頁面上輸出了Hello,JavaScript，就表示成功了。看了前面AMD和這個CMD的栗子之後，大部分人會感覺兩者寫起來好像沒什麼區別。雖然寫起來像，還是有一些區別：
- 對於依賴的模塊，
AMD是提前執行，CMD是延遲執行。不過RequireJS從2.0開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD推崇as lazy as possible。 CMD推崇依賴就近，AMD推崇依賴前置。AMD的API默認是一個當多個用，CMD的API嚴格區分，推崇職責單一。比如AMD裏，require分全局require和局部require，都叫require。CMD裏，沒有全局require，而是根據模塊系統的完備性，提供seajs.use來實現模塊系統的加載啓動。CMD裏，每個API都簡單純粹。
以上區別都是摘抄自：AMD 和 CMD 的區別有哪些？玉伯的回答。
外鏈
ES6 Module
上面解決js模塊化的方法都是使用第三方的庫來解決的。但是欣慰的是，ES6幫我們解決了原生js能夠不依賴第三方的庫來使用模塊解決方案。
歷史上，JavaScript一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import，但是JavaScript任何這方面的支持都沒有，這對開發大型的、複雜的項目形成了巨大障礙。《ECMAScript 6 入門》 - 阮一峯
還是寫一個小栗子瞭解一下，又是新建兩個文件a.js和b.js：
// a.js
var num1 = 1;
var num2 = 2;
export {num1, num2};
// b.js
import {num1, num2} from './a.js';
function add(num1, num2) {
return num1 + num2;
}
console.log(add(num1, num2));
因爲使用到了ES6的語法，所以需要轉碼器來把代碼轉換成ES5的代碼。只需要使用npm安裝traceur就行了。
npm install traceur -g
安裝好之後，我們就通過traceur命令來運行b.js。就和Node運行js文件一樣。
traceur b.js
3 // 輸出
如果命令行中輸出了3，就表示成功了。
- 爲什麼要使用
ES6 Module規範呢？
不用依賴第三方的庫來結局模塊化的問題，語法簡單簡潔。上手簡單。可能是未來模塊化解決方案的首選。