?CJS?,?UMD?,?ESM?,?IIFE?是JavaScript用來實現(xiàn)"模塊"的不同規(guī)則。
CJS
?CommonJS?的簡寫，只能在 NodeJS 上運行，使用 ?require("module")? 讀取并加載模塊。
缺點：不支持瀏覽器，執(zhí)行后才能拿到依賴信息，由于用戶可以動態(tài) require，無法做到提前分析依賴以及Tree-Shaking 。
CommonJS 規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。
用法如下：
// 文件名: foo.js
var $ = require('jquery');
function myFunc(){};
// 暴露公共方法（一個）
module.exports = myFunc;AMD
?Asynchronous Module Definition?的縮寫（代表異步模塊定義），可以看作 CJS 的異步版本，制定了一套規(guī)則使模塊可以被異步 require 進來并在回調(diào)函數(shù)里繼續(xù)使用，然后 require.js 等前端庫也可以利用這個規(guī)則加載代碼了。
用法如下:
// 文件名: foo.js
define(['jquery'], function ($) {
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
});定義的第一個部分是一個依賴數(shù)組，第二個部分是回調(diào)函數(shù)，只有當依賴的組件可用時（像RequireJS這樣的腳本加載器會負責(zé)這一部分，包括找到文件路徑）回調(diào)函數(shù)才被執(zhí)行。
理想狀態(tài)下，期望其依賴是異步加載的，通過在中注入script，不阻塞瀏覽器的加載和渲染，但實際環(huán)境下，其表現(xiàn)的沒有那么好，因此需要 amd 模塊為一個單文件模塊并與require.js 優(yōu)化器配合來進行渲染。
UMD
?Universal Module Definition?的縮寫（代表通用模塊定義），同時兼容 CJS 和 AMD，并且支持直接在前端用 <script src="lib.umd.js"></script> 的方式加載?，F(xiàn)在還在廣泛使用，不過可能將被 ESM 和 IIFE 逐漸代替。
用法如下：
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之類的
module.exports = factory(require('jquery'));
} else {
// 瀏覽器全局變量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function($) {
// 方法
function myFunc() {};
// 暴露公共方法
return myFunc;
}));IIFE
?Immediately Invoked Function Expression?的縮寫（立即調(diào)用函數(shù)表達式），只是一種寫法，可以隱藏一些局部變量，可以用來代替 UMD 作為純粹給前端使用的寫法。
IIFE的寫法如下：
(function () {
// 語句
})();ESM
?ECMAScript Module?的縮寫，使用 import export 來管理依賴。由于它們只能寫在所有表達式外面，所以打包器可以輕易做到分析依賴以及 Tree-Shaking。ESM 也支持動態(tài)加載（import ）。
瀏覽器直接通過 <script type="module"> 即可使用該寫法。
用法如下：
import React from 'react';總結(jié)
- 由于 ?
ESM? 具有簡單的語法，異步特性和可搖樹性，因此它是最好的模塊化方案 - ?
UMD? 隨處可見，通常在 ESM 不起作用的情況下用作備用 - ?
CJS? 是同步的，適合后端 - ?
AMD? 是異步的，適合前端
