JavaScript模塊化CommonJS/AMD/CMD/UMD/ES6Module的區別

目錄

• JS-模塊化進程
• 原始的開發方式
• CommonJS && node.js
• AMD && Require.js
• CMD && Sea.js
• UMD && webpack
• ES6 Module && ES6
  • 1. 瀏覽器加載
  • 2. Node加載
• 總結
• 參考

JS-模塊化進程

隨着js技術的不斷發展，途中會遇到各種問題，比如模塊化。

那什么是模塊化呢,他們的目的是什么？

定義：如何把一段代碼封裝成一個有用的單元，以及如何注冊此模塊的能力、輸出的值
依賴引用：如何引用其它代碼單元

到目前為止，大概分為以下幾個里程碑式節點。

原始的開發方式 ---> CommonJS ---> AMD ---> CMD ---> UMD ---> ES6Module

原始的開發方式

最開始的時候，JS自身是沒有模塊機制的。項目有多個js文件。

// a.js
function foo() {}
// b.js
function bar() {}
// c.js
foo()

HTML加載

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

原始的開發方式，隨着項目的復雜度，代碼量越來越多，所需要加載的文件也越來越多，這個時候，就要考慮幾個問題了：

1. 命名問題：所有文件的方法都是掛載到global上，會污染全局環境，並且需要考慮命名沖突問題。
2. 依賴問題：script是順序加載的，如果各文件之間有依賴，那我們得考慮加載.js文件的書寫順序。
3. 網絡問題。如果文件過多，所需請求次數會增多，增加加載時間。

CommonJS && node.js

CommonJS規范 CommonJS使用例子
CommonJS規范，主要運行於服務器端，同步加載模塊，而加載的文件資源大多數在本地服務器，所以執行速度或時間沒問題。Node.js很好的實現了該規范。
該規范指出，一個單獨的文件就是一個模塊。
模塊功能主要的幾個命令：require和module.exports。require命令用於輸入其他模塊提供的功能，module.exports命令用於規范模塊的對外接口，輸出的是一個值的拷貝，輸出之后就不能改變了，會緩存起來。

// moduleA.js
var name = 'weiqinl'
function foo() {}

module.exports = exports = {
name,
foo
}

// moduleB.js
var ma = require('./moduleA') // 可以省略后綴.js
exports.bar = function() {
ma.name === 'weiqinl' // true
ma.foo() // 執行foo方法
}

// moduleC.js
var mb = require('./moduleB')
mb.bar()

通過例子，我們可以看出require(moduleId)來加載其他模塊的內容，其返回值就是其引用的外部模塊所暴露的API，之后再通過module.exports或者exports來為當前模塊的方法和變量提供輸出接口。

最后通過node來執行模塊。

AMD && Require.js

AMD規范文檔 AMD使用例子
AMD(Asynchronous Module Definition - 異步加載模塊定義)規范，制定了定義模塊的規則,一個單獨的文件就是一個模塊，模塊和模塊的依賴可以被異步加載。主要運行於瀏覽器端，這和瀏覽器的異步加載模塊的環境剛好適應，它不會影響后面語句的運行。該規范是在RequireJs的推廣過程中逐漸完善的。

模塊功能主要的幾個命令：define、require、return和define.amd。define是全局函數，用來定義模塊,define(id?, dependencies?, factory)。require命令用於輸入其他模塊提供的功能，return命令用於規范模塊的對外接口，define.amd屬性是一個對象，此屬性的存在來表明函數遵循AMD規范。

// moduleA.js
define(['jQuery','lodash'], function($, _) {
var name = 'weiqinl',
function foo() {}
return {
name,
foo
}
})

// index.js
require(['moduleA'], function(a) {
a.name === 'weiqinl' // true
a.foo() // 執行A模塊中的foo函數
// do sth...
})

// index.html
<script src="js/require.js" data-main="js/index"></script>

在這里，我們使用define來定義模塊，return來輸出接口， require來加載模塊，這是AMD官方推薦用法。當然也可以使用其他兼容性的寫法，比如對 Simplified CommonJS Wrapper 格式的支持，但背后還是原始AMD的運行邏輯。
AMD的運行邏輯是：提前加載，提前執行。在Requirejs中，申明依賴模塊時，會第一時間加載並執行模塊內的代碼，使后面的回調函數能在所需的環境中運行。
為了更好地優化請求，同時推出了打包工具r.js，使所需加載的文件數減少。require.js模塊化開發，並用r.js打包例子

CMD && Sea.js

CMD規范文檔 CMD使用例子
CMD(Common Module Definition - 通用模塊定義)規范主要是Sea.js推廣中形成的，一個文件就是一個模塊，可以像Node.js一般書寫模塊代碼。主要在瀏覽器中運行，當然也可以在Node.js中運行。

// moduleA.js
// 定義模塊
define(function(require, exports, module) {
var func = function() {
var a = require('./a') // 到此才會加載a模塊
a.func()
if(false) {
var b = require('./b') // 到此才會加載b模塊
b.func()
}
}
// do sth...
exports.func = func;
})

// index.js
// 加載使用模塊
seajs.use('moduleA.js', function(ma) {
var ma = math.func()
})

// HTML，需要在頁面中引入sea.js文件。
<script src="./js/sea.js"></script>
<script src="./js/index.js"></script>

這里define是一個全局函數，用來定義模塊，並通過exports向外提供接口。之后，如果要使用某模塊，可以通過require來獲取該模塊提供的接口。最后使用某個組件的時候，通過seajs.use()來調用。

1. 通過exports暴露接口。這意味着不需要命名空間了，更不需要全局變量。
2. 通過require引入依賴。這可以讓依賴內置，我們只需要關心當前模塊的依賴。關注度分離

CMD推崇依賴就近，延遲執行。在上面例子中，通過require引入的模塊，只有當程序運行到此處的時候，模塊才會自動加載執行。

同時推出了spm(static package manager)的打包方式，聽說支付寶的項目在使用。

UMD && webpack

UMD文檔
UMD(Universal Module Definition - 通用模塊定義)模式，該模式主要用來解決CommonJS模式和AMD模式代碼不能通用的問題，並同時還支持老式的全局變量規范。

// 使用Node, AMD 或 browser globals 模式創建模塊
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD模式. 注冊為一個匿名函數
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node等類CommonJS的環境
module.exports = factory(require('b'));
} else {
// 瀏覽器全局變量 (root is window)
root.returnExports = factory(root.b);
}
}(typeof self !== 'undefined' ? self : this, function (b) {
// 以某種方式使用 b

//返回一個值來定義模塊導出。(即可以返回對象，也可以返回函數)
return {};
}));

1. 判斷define為函數，並且是否存在define.amd，來判斷是否為AMD規范,
2. 判斷module是否為一個對象，並且是否存在module.exports來判斷是否為CommonJS規范
3. 如果以上兩種都沒有，設定為原始的代碼規范。

這種模式，通常會在webpack打包的時候用到。output.libraryTarget將模塊以哪種規范的文件輸出。

ES6 Module && ES6

ES6模塊加載文檔 ES6 Module使用例子
在ECMAScript 2015版本出來之后，確定了一種新的模塊加載方式，我們稱之為ES6 Module。它和前幾種方式有區別和相同點。

1. 它因為是標准，所以未來很多瀏覽器會支持，可以很方便的在瀏覽器中使用。
2. 它同時兼容在node環境下運行。
3. 模塊的導入導出，通過import和export來確定。
4. 可以和Commonjs模塊混合使用。
5. CommonJS輸出的是一個值的拷貝。ES6模塊輸出的是值的引用,加載的時候會做靜態優化。
6. CommonJS模塊是運行時加載確定輸出接口，ES6模塊是編譯時確定輸出接口。

ES6模塊功能主要由兩個命令構成：import和export。import命令用於輸入其他模塊提供的功能。export命令用於規范模塊的對外接口。

export的幾種用法

// 輸出變量
export var name = 'weiqinl'
export var year = '2018'

// 輸出一個對象（推薦）
var name = 'weiqinl'
var year = '2018'
export { name, year}


// 輸出函數或類
export function add(a, b) {
return a + b;
}

// export default 命令
export default function() {
console.log('foo')
}

import導入其他模塊

// 正常命令
import { name, year } from './module.js' //后綴.js不能省略

// 如果遇到export default命令導出的模塊
import ed from './export-default.js'

模塊編輯好之后，它可以以多種形式加載。

1. 瀏覽器加載

瀏覽器加載ES6模塊，使用<script>標簽，但是要加入type="module"屬性
外鏈js文件

<script type="module" src="index.js"></script>

也可以內嵌在網頁中

<script type="module">
import utils from './utils.js';
// other code
</script>

對於加載外部模塊，需要注意：

• 代碼是在模塊作用域之中運行，而不是在全局作用域運行。模塊內部的頂層變量，外部不可見。
• 模塊腳本自動采用嚴格模式，不管有沒有聲明use strict。
• 模塊之中，可以使用import命令加載其他模塊（.js后綴不可省略，需要提供絕對 URL 或相對 URL），也可以使用export命令輸出對外接口。
• 模塊之中，頂層的this關鍵字返回undefined，而不是指向window。也就是說，在模塊頂層使用this關鍵字，是無意義的。
• 同一個模塊如果加載多次，將只執行一次。

2. Node加載

Node要求 ES6 模塊采用.mjs后綴文件名。也就是說，只要腳本文件里面使用import或者export命令，就必須采用.mjs后綴名。
這個功能還在試驗階段。安裝Node V8.5.0或以上版本，要用--experimental-modules參數才能打開該功能。

$ node --experimental-modules my-app.mjs

Node的import命令只支持異步加載本地模塊(file: 協議)，不支持加載遠程模塊。

總結

以上即是，我對js模塊化概念，最主要的還是他們輸入輸出的區別，理論結合實踐完成的簡單梳理。通過閱讀前輩的文章或者各種Issue,也大概了解了JS的歷史進程。以史為鑒，可以知興替。此時不斷成為歷史，歷史終將定論。

參考

0. 各模塊化使用的例子
1. Require.js
2. Sea.js
3. UMD
4. ES6 Module
5. JavaScript模塊化七日談

[完]