CommonJS
服務器端的 Node.js 遵循 CommonJS規范，該規范的核心思想是允許模塊通過 require 方法來同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來導出需要暴露的接口。
使用
引入模塊
let express = require('express');
導出模塊
module.exports.test1 = function () {}
exports.test2 = {}
優缺點
優點
- 服務器端模塊便于重用
- NPM中已經有超過45萬個可以使用的模塊包
- 簡單并容易使用
缺點
- 同步的模塊加載方式不適合瀏覽器環境，同步意味著阻塞加載，瀏覽器資源是異步加載的
- 不能非阻塞的并行加載多個模塊
實現
- 服務器端的 Node.js
- Browserify，瀏覽器端的 CommonJS 實現，可以使用 NPM 的模塊，但是編譯打包后的文件體積可能很大
- modules-webmake，類似Browserify，還不如 Browserify 靈活
- wreq，Browserify 的前身
AMD
Asynchronous Module Definition 規范其實只有一個主要接口，define(id?, dependencies?, factory)，它要在聲明模塊的時候指定所有的依賴dependencies，并且還要當做形參傳到factory中，對于依賴的模塊提前執行，依賴前置。
使用
定義模塊
define('module', ['dep1', 'dep2'], function (d1, d2) {
return {}
});
引入模塊
require(['module', '../file'], funtion(module, file) {
// ...
})
優缺點
優點
- 適合在瀏覽器環境中異步加載模塊
- 可以并行加載多個模塊
缺點
提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
-
不符合通用的模塊化思維方式，是一種妥協的實現
?
實現
CMD
Common Module Definition 規范和 AMD 很相似，盡量保持簡單，并與 CommonJS 和 Node.js 的 Modules 規范保持了很大的兼容性。
使用
定義
define(function (require, exports, module) {
var $ = require('jquery');
var Sprinning = require('./spinning');
exports.test1 = {};
module.exports = {};
});
引入
define(function (require, exports, module) {
var $ = require('jquery');
$('div')...
});
優缺點
優點
- 依賴就近，延遲執行
- 可以很容易在Node.js中運行
缺點
- 依賴SPM打包，模塊的加載邏輯偏重
實現
ES6 模塊
EcmaScript6 標準增加了 JavaScript 語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。
使用
定義
export default {
a: 10,
b: function () {
// ...
}
}
引入
import 'jquery';
import Vue from 'vue'
import { render } from 'react-dom'
優缺點
優點
- 容易進行靜態分析
- 面向未來的ECMAScript標準
缺點
原生瀏覽器還沒有實現標準
-
全新的命令字，新版的Node.js才支持
?
實現
期望的模塊系統
可以兼容多種模塊風格，盡量可以利用已有的代碼，不僅僅只是 JavaScript 模塊化，還有 CSS、圖片、字體等資源也需要模塊化。
