在 JavaScript 的發(fā)展過(guò)程中，模塊化解決方案不斷演進(jìn)，涌現(xiàn)了多種模塊格式。本文將系統(tǒng)介紹最常用的幾種：CommonJS、AMD、UMD 和 ESM，并穿插介紹 IIFE（Immediately Invoked Function Expression）作為背景知識(shí)，以便理解它們的使用場(chǎng)景和差異。
一、CommonJS
1.1 介紹
CommonJS 是最早專門為 Node.js 設(shè)計(jì)的模塊系統(tǒng)。它通過(guò) require() 引入模塊，使用 module.exports 或 exports 導(dǎo)出模塊。模塊是同步加載的，因此更適合服務(wù)器端。
1.2 適用場(chǎng)景
- Node.js 后端項(xiàng)目。
- 服務(wù)器端環(huán)境，模塊加載速度快，不依賴異步。
1.3 使用方法
// math.js
module.exports = {
add(a, b) {
return a + b;
}
};
// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 輸出：5
1.4 特點(diǎn)總結(jié)
- 適合服務(wù)器端同步加載。
- 在瀏覽器環(huán)境需要打包工具（如 Webpack、Browserify）處理。
- 加載方式簡(jiǎn)單直觀。
二、AMD（Asynchronous Module Definition）
2.1 介紹
AMD 規(guī)范是為了解決瀏覽器端模塊的 異步加載 問(wèn)題提出的。代表實(shí)現(xiàn)是 RequireJS。它通過(guò) define() 函數(shù)定義模塊及其依賴，模塊可以在需要時(shí)動(dòng)態(tài)加載，提高前端性能。
2.2 適用場(chǎng)景
- 瀏覽器端項(xiàng)目。
- 需要異步按需加載模塊的大型應(yīng)用。
2.3 使用方法
// 定義模塊 math.js
define([], function() {
return {
add(a, b) {
return a + b;
}
};
});
// 引入模塊
require(['math'], function(math) {
console.log(math.add(2, 3)); // 輸出：5
});
2.4 特點(diǎn)總結(jié)
- 適合瀏覽器環(huán)境，模塊加載不會(huì)阻塞頁(yè)面。
- 需要模塊加載器（如 RequireJS）支持。
- 定義和使用模塊語(yǔ)法較冗長(zhǎng)。
（插曲）IIFE（Immediately Invoked Function Expression）
在正式介紹 UMD 之前，我們需要了解一下 IIFE，因?yàn)樗?UMD 的技術(shù)基礎(chǔ)之一。
IIFE 介紹
IIFE 是立即執(zhí)行函數(shù)表達(dá)式，它在定義后立刻執(zhí)行，常用于創(chuàng)建私有作用域，避免變量污染全局環(huán)境。
使用示例
(function() {
console.log('This function runs immediately!');
})();
為什么重要？
UMD 和其他模塊打包格式常常利用 IIFE 包裹代碼，以便：
- 在不同環(huán)境下自動(dòng)檢測(cè)并執(zhí)行相應(yīng)邏輯。
- 避免污染全局作用域。
三、UMD（Universal Module Definition）
3.1 介紹
UMD 是一種綜合方案，它能讓同一段代碼同時(shí)兼容 CommonJS、AMD 和瀏覽器全局變量。通常使用 IIFE 檢測(cè)當(dāng)前環(huán)境，并根據(jù)環(huán)境選擇不同的導(dǎo)出方式。
3.2 適用場(chǎng)景
- 開(kāi)發(fā)需要同時(shí)在 Node.js、AMD、瀏覽器 使用的庫(kù)。
- 保證最大的兼容性，適配不同的模塊系統(tǒng)。
3.3 使用方法
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// 瀏覽器全局
root.MyLib = factory();
}
}(this, function () {
return {
hello() {
return 'Hello, UMD!';
}
};
}));
3.4 特點(diǎn)總結(jié)
- 超強(qiáng)兼容性：Node.js、AMD、瀏覽器。
- 適合發(fā)布公共庫(kù)、SDK 等。
四、ESM（ECMAScript Modules）
4.1 介紹
ESM 是 ECMAScript 官方在 ES6（2015）標(biāo)準(zhǔn)中引入的模塊系統(tǒng)，原生支持 import 和 export。目前已經(jīng)被現(xiàn)代瀏覽器和 Node.js 廣泛支持。
4.2 適用場(chǎng)景
- 現(xiàn)代前端開(kāi)發(fā)（React、Vue、Svelte 等框架）。
-
現(xiàn)代 Node.js 項(xiàng)目（v12+，默認(rèn)或通過(guò)
.mjs后綴使用）。 - 支持 tree-shaking 優(yōu)化打包體積。
4.3 使用方法
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 輸出：5
<html>
<head>
<title>remote component test</title>
</head>
<body>
<div id="app">
<helloWorld :msg="message"></helloWorld>
</div>
<!-- import script vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module">
const { createApp, defineAsyncComponent } = Vue
import helloworld from 'http://wd-local.com/HelloWorld.es.js'
// const helloworld = defineAsyncComponent(() =>
// import('http://wd-local.com/HelloWorld.es.js')
// )
createApp({
components: {
helloworld
},
data () {
return {
message: 'static web page'
}
}
}).mount('#app')
</script>
</body>
</html>
4.4 特點(diǎn)總結(jié)
- 靜態(tài)結(jié)構(gòu)，能被編譯器提前分析。
- 支持按需加載、tree-shaking。
- 是未來(lái)的標(biāo)準(zhǔn)，推薦新項(xiàng)目默認(rèn)使用。
五、各種模塊格式對(duì)比
| 格式 | 語(yǔ)法 | 支持環(huán)境 | 加載方式 | 異步加載 | 特點(diǎn) |
|---|---|---|---|---|---|
| CommonJS |
require / module.exports
|
Node.js | 同步 | 否 | 簡(jiǎn)單直觀，服務(wù)器端標(biāo)準(zhǔn) |
| AMD | define |
瀏覽器 (RequireJS) | 異步 | 是 | 瀏覽器異步模塊加載 |
| UMD | IIFE 檢測(cè) + define / module.exports
|
瀏覽器、Node.js | 同步或異步 | 支持 | 兼容多環(huán)境，適合發(fā)布庫(kù) |
| ESM |
import / export
|
現(xiàn)代瀏覽器、Node.js | 異步（默認(rèn)） | 是 | 靜態(tài)分析、tree-shaking 優(yōu)化 |
六、總結(jié)與建議
| 使用場(chǎng)景 | 推薦模塊格式 |
|---|---|
| 純后端項(xiàng)目（Node.js） | CommonJS |
| 前端老項(xiàng)目（依賴 RequireJS 等） | AMD |
| 發(fā)布通用庫(kù)，兼容多個(gè)環(huán)境 | UMD |
| 新的前端項(xiàng)目、現(xiàn)代化 Node.js 項(xiàng)目 | ESM |
小提示：
- CommonJS 簡(jiǎn)單好用，但已不適合新前端項(xiàng)目(vite默認(rèn)不支持)。
- AMD 漸漸式微，主要?dú)v史項(xiàng)目中出現(xiàn)。
- UMD 適合寫一次到處運(yùn)行的通用 SDK。
- ESM 是未來(lái)發(fā)展趨勢(shì)，瀏覽器和 Node.js 都在全面支持！
