本文包含兩部分，第一部分通過(guò)簡(jiǎn)明的描述介紹什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它們的常見用法，第二部分則根據(jù)實(shí)際問(wèn)題指出在正常的 webpack 構(gòu)建過(guò)程中該如何指定打包配置中的模塊化參數(shù)。
JavaScript 模塊化方案
模塊化這個(gè)話題在 ES6 之前是不存在的，因此這也被詬病為早期 JavaScript 開發(fā)全局污染和依賴管理混亂問(wèn)題的源頭。這類歷史淵源和發(fā)展概述在本文將不會(huì)提及，因此感興趣可以自行搜索 JavaScript 發(fā)展史進(jìn)行了解。
直接進(jìn)入正題，我們來(lái)看看常見的模塊化方案都有哪些以及他們都有哪些內(nèi)容。
CommonJS
CommonJS 的一個(gè)模塊就是一個(gè)腳本文件，通過(guò)執(zhí)行該文件來(lái)加載模塊。CommonJS 規(guī)范規(guī)定，每個(gè)模塊內(nèi)部，module 變量代表當(dāng)前模塊。這個(gè)變量是一個(gè)對(duì)象，它的 exports 屬性（即 module.exports）是對(duì)外的接口。加載某個(gè)模塊，其實(shí)是加載該模塊的 module.exports 屬性。
我們見過(guò)這樣的模塊引用
這是因?yàn)槲覀儼涯K的方法定義在了模塊的屬性上：
require 命令第一次加載該腳本時(shí)就會(huì)執(zhí)行整個(gè)腳本，然后在內(nèi)存中生成一個(gè)對(duì)象（模塊可以多次加載，但是在第一次加載時(shí)才會(huì)運(yùn)行，結(jié)果被緩存），這個(gè)結(jié)果長(zhǎng)成這樣：
Node.js 的模塊機(jī)制實(shí)現(xiàn)就是參照了 CommonJS 的標(biāo)準(zhǔn)。但是 Node.js 額外做了一件事，即為每個(gè)模塊提供了一個(gè) exports 變量，以指向 module.exports，這相當(dāng)于在每個(gè)模塊最開始，寫有這么一行代碼：
CommonJS 模塊的特點(diǎn)：
- 所有代碼都運(yùn)行在模塊作用域，不會(huì)污染全局作用域。
- 獨(dú)立性是模塊的重要特點(diǎn)就，模塊內(nèi)部最好不與程序的其他部分直接交互。
- 模塊可以多次加載，但是只會(huì)在第一次加載時(shí)運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行，必須清除緩存。
- 模塊加載的順序，按照其在代碼中出現(xiàn)的順序。
AMD
CommonJS 規(guī)范很好，但是不適用于瀏覽器環(huán)境，于是有了 AMD 和 CMD 兩種方案。AMD 全稱 Asynchronous Module Definition，即異步模塊定義。它采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。除了和 CommonJS 同步加載方式不同之外，AMD 在模塊的定義與引用上也有所不同。
AMD 的模塊引入由 define 方法來(lái)定義，在 define API 中：
- id：模塊名稱，或者模塊加載器請(qǐng)求的指定腳本的名字；
- dependencies：是個(gè)定義中模塊所依賴模塊的數(shù)組，默認(rèn)為 [“require”, “exports”, “module”]，舉個(gè)例子比較好理解，當(dāng)我們創(chuàng)建一個(gè)名為 “alpha” 的模塊，使用了require，exports，和名為 “beta” 的模塊，需要如下書寫（示例1）；
- factory：為模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值；
如果模塊定義不存在依賴，那么可以直接定義對(duì)象：
而使用時(shí)我們依舊通過(guò) require 關(guān)鍵字，它包含兩個(gè)參數(shù)，第一個(gè)數(shù)組為要加載的模塊，第二個(gè)參數(shù)為回調(diào)函數(shù)：
舉個(gè)例子：
CMD
CMD 全稱為 Common Module Definition，是 Sea.js 所推廣的一個(gè)模塊化方案的輸出。在 CMD define 的入?yún)⒅?，雖然也支持包含 id, deps 以及 factory 三個(gè)參數(shù)的形式，但推薦的是接受 factory 一個(gè)入?yún)?，然后在入?yún)?zhí)行時(shí)，填入三個(gè)參數(shù) require、exports 和 module：
通過(guò)執(zhí)行該構(gòu)造方法，可以得到模塊向外提供的接口。在與 AMD 比較上存在兩個(gè)主要的不同點(diǎn)（來(lái)自玉伯回答）：
如果說(shuō)的不清楚，那么我們直接看上面的代碼用 AMD 該怎么寫：
UMD
UMD，全稱 Universal Module Definition，即通用模塊規(guī)范。既然 CommonJs 和 AMD 風(fēng)格一樣流行，那么需要一個(gè)可以統(tǒng)一瀏覽器端以及非瀏覽器端的模塊化方案的規(guī)范。
直接來(lái)看看官方給出的 jQuery 模塊如何用 UMD 定義的代碼：
UMD的實(shí)現(xiàn)很簡(jiǎn)單：
- 先判斷是否支持 AMD（define 是否存在），存在則使用 AMD 方式加載模塊；
- 再判斷是否支持 Node.js 模塊格式（exports 是否存在），存在則使用 Node.js 模塊格式；
- 前兩個(gè)都不存在，則將模塊公開到全局（window 或 global）；
ES Modules
當(dāng)然，以上說(shuō)的種種都是社區(qū)提供的方案，歷史上，JavaScript 一直沒有模塊系統(tǒng)，直到 ES6 在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了它。其設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運(yùn)行時(shí)確定這些東西。比如，CommonJS 模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性。而 ES Modules 不是對(duì)象，而是通過(guò) export 命令顯式指定輸出的代碼。
ES Modules 的模塊化能力由 export 和 import 組成，export 命令用于規(guī)定模塊的對(duì)外接口，import 命令用于輸入其他模塊提供的功能。我們可以這樣定義一個(gè)模塊：
然后再這樣引入他們：
除以上兩種命令外，還有一個(gè) export default 命令用于指定模塊的默認(rèn)輸出（一個(gè)模塊只能有一個(gè)默認(rèn)輸出）。如果使用了 export default 語(yǔ)法，在 import 時(shí)則可以任意命名。由于 export default 命令的本質(zhì)是將后面的值，賦給 default 變量，所以也可以直接將一個(gè)值寫在 export default 之后。當(dāng)然，引用方式也存在多種：
需要注意的是 Modules 會(huì)自動(dòng)采用嚴(yán)格模式，且 import 命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。
延伸閱讀 JavaScript 模塊的循環(huán)加載
webpack 打包輸出配置
說(shuō)完理論，來(lái)看看實(shí)際項(xiàng)目中遇到的問(wèn)題。當(dāng)我們開發(fā)完一個(gè) JavaScript 模塊必然要經(jīng)歷打包的流程，而在 webpack 配置中，通過(guò)指定 output 選項(xiàng)就可以告訴 webpack 如何輸出 bundle, asset 以及其他載入的內(nèi)容。那么如何實(shí)現(xiàn)不同環(huán)境可兼容的構(gòu)建呢？
- import：通過(guò) ES Modules 規(guī)范語(yǔ)法進(jìn)入引入；
- 變量：作為一個(gè)全局變量，比如通過(guò) script 標(biāo)簽來(lái)訪問(wèn)；
- this：通過(guò) this 對(duì)象訪問(wèn)；
- window：在瀏覽器中通過(guò) window 對(duì)象訪問(wèn)；
- UMD：在 AMD 或 CommonJS 通過(guò) require 引入后訪問(wèn)；
output 中有一個(gè)屬性叫做 libraryTarget，被用來(lái)指定如何暴露你的模塊的屬性。你可以這樣嘗試賦值給一個(gè)變量或者指定對(duì)象的屬性：
如果需要更完整的模塊化 bundle，以確保和各模塊系統(tǒng)兼容，那么可以這樣嘗試：
因此，如果只看 output 內(nèi)容，那么我的一個(gè) webpack 生產(chǎn)環(huán)境配置可以寫成這樣：
【責(zé)任編輯：龐桂玉 TEL：（010）68476606】