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