在 JavaScript 的發展過程中，模塊化解決方案不斷演進，涌現了多種模塊格式。本文將系統介紹最常用的幾種：CommonJS、AMD、UMD 和 ESM，并穿插介紹 IIFE（Immediately Invoked Function Expression）作為背景知識，以便理解它們的使用場景和差異。
一、CommonJS
1.1 介紹
CommonJS 是最早專門為 Node.js 設計的模塊系統。它通過 require() 引入模塊，使用 module.exports 或 exports 導出模塊。模塊是同步加載的，因此更適合服務器端。
1.2 適用場景
- Node.js 后端項目。
- 服務器端環境，模塊加載速度快，不依賴異步。
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 特點總結
- 適合服務器端同步加載。
- 在瀏覽器環境需要打包工具（如 Webpack、Browserify）處理。
- 加載方式簡單直觀。
二、AMD（Asynchronous Module Definition）
2.1 介紹
AMD 規范是為了解決瀏覽器端模塊的 異步加載 問題提出的。代表實現是 RequireJS。它通過 define() 函數定義模塊及其依賴，模塊可以在需要時動態加載，提高前端性能。
2.2 適用場景
- 瀏覽器端項目。
- 需要異步按需加載模塊的大型應用。
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 特點總結
- 適合瀏覽器環境，模塊加載不會阻塞頁面。
- 需要模塊加載器（如 RequireJS）支持。
- 定義和使用模塊語法較冗長。
（插曲）IIFE（Immediately Invoked Function Expression）
在正式介紹 UMD 之前，我們需要了解一下 IIFE，因為它是 UMD 的技術基礎之一。
IIFE 介紹
IIFE 是立即執行函數表達式，它在定義后立刻執行，常用于創建私有作用域，避免變量污染全局環境。
使用示例
(function() {
console.log('This function runs immediately!');
})();
為什么重要？
UMD 和其他模塊打包格式常常利用 IIFE 包裹代碼，以便：
- 在不同環境下自動檢測并執行相應邏輯。
- 避免污染全局作用域。
三、UMD（Universal Module Definition）
3.1 介紹
UMD 是一種綜合方案，它能讓同一段代碼同時兼容 CommonJS、AMD 和瀏覽器全局變量。通常使用 IIFE 檢測當前環境，并根據環境選擇不同的導出方式。
3.2 適用場景
- 開發需要同時在 Node.js、AMD、瀏覽器 使用的庫。
- 保證最大的兼容性，適配不同的模塊系統。
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 特點總結
- 超強兼容性：Node.js、AMD、瀏覽器。
- 適合發布公共庫、SDK 等。
四、ESM（ECMAScript Modules）
4.1 介紹
ESM 是 ECMAScript 官方在 ES6（2015）標準中引入的模塊系統，原生支持 import 和 export。目前已經被現代瀏覽器和 Node.js 廣泛支持。
4.2 適用場景
- 現代前端開發（React、Vue、Svelte 等框架）。
-
現代 Node.js 項目（v12+，默認或通過
.mjs后綴使用）。 - 支持 tree-shaking 優化打包體積。
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>
image.png
4.4 特點總結
- 靜態結構，能被編譯器提前分析。
- 支持按需加載、tree-shaking。
- 是未來的標準，推薦新項目默認使用。
五、各種模塊格式對比
| 格式 | 語法 | 支持環境 | 加載方式 | 異步加載 | 特點 |
|---|---|---|---|---|---|
| CommonJS |
require / module.exports
|
Node.js | 同步 | 否 | 簡單直觀，服務器端標準 |
| AMD | define |
瀏覽器 (RequireJS) | 異步 | 是 | 瀏覽器異步模塊加載 |
| UMD | IIFE 檢測 + define / module.exports
|
瀏覽器、Node.js | 同步或異步 | 支持 | 兼容多環境，適合發布庫 |
| ESM |
import / export
|
現代瀏覽器、Node.js | 異步（默認） | 是 | 靜態分析、tree-shaking 優化 |
六、總結與建議
| 使用場景 | 推薦模塊格式 |
|---|---|
| 純后端項目（Node.js） | CommonJS |
| 前端老項目（依賴 RequireJS 等） | AMD |
| 發布通用庫，兼容多個環境 | UMD |
| 新的前端項目、現代化 Node.js 項目 | ESM |
小提示：
- CommonJS 簡單好用，但已不適合新前端項目(vite默認不支持)。
- AMD 漸漸式微，主要歷史項目中出現。
- UMD 適合寫一次到處運行的通用 SDK。
- ESM 是未來發展趨勢，瀏覽器和 Node.js 都在全面支持！
