---

紅寶書第二十一講：詳解JavaScript的模塊化（CommonJS與ES Modules）

資料取自《JavaScript高級程序設計（第5版）》。
查看總目錄：紅寶書學習大綱

---

一、模塊化的意義：分而治之

模塊化解決代碼依賴混亂、命名沖突問題，核心思想：

• 每個文件為一個獨立模塊
• **導出（export）**需要暴露的功能
• **導入（import）**其他模塊的功能

---

二、CommonJS：服務端的模塊化方案

CommonJS設計用于服務器環境（如Node.js），特性：

• 同步加載 → 適合本地文件系統 ¹
• 使用require()導入，module.exports導出 ²

示例1：導出對象

// math.js
function add(a, b) { return a + b; }
module.exports = { add }; // 導出模塊功能 [^5]// main.js
const math = require('./math.js'); // 導入模塊 [^6]
console.log(math.add(3, 5)); // 輸出8

示例2：導出類或實例

// User.js
class User { /* ... */ }
module.exports = User; // 導出類 [^5]// app.js
const User = require('./User.js');
const user = new User();

關鍵特點：導出的是對象或值的拷貝，多次導入會緩存結果 ³

---

三、ES Modules（ESM）：原生的瀏覽器支持

ES Modules是JavaScript官方標準，特性：

• 瀏覽器直接支持（需要<script type="module">）⁴³
• 導出用export，導入用import

示例3：基本語法

// math.js
export const multiply = (a, b) => a * b;// main.js
import { multiply } from './math.js';
console.log(multiply(3, 5)); // 輸出15

示例4：導出默認值

// config.js
const API_KEY = '12345abc';
export default API_KEY; // 默認導出// app.js
import key from './config.js'; // 默認導入不使用大括號

關鍵特點：導出的是引用，動態綁定，值更新影響所有導入方 ³

---

四、對比CommonJS與ES Modules

特征	CommonJS	ES Modules
運行環境	Node.js（服務器端）1	瀏覽器原生支持+現代Node 4
加載方式	同步（立即執行）1	異步（按需加載）3
導出內容	值的拷貝（靜態）2	值的引用（動態）3
語法	module.exports / require	export / import

---

五、現代工具鏈：模塊打包與轉換

由于瀏覽器兼容問題，常用工具：

1. Webpack/Babel → 將ESM/CommonJS轉為兼容代碼 ⁵
2. SystemJS → 動態加載多種格式模塊（包括ESM）⁵

---

目錄：總目錄
上篇文章：紅寶書第二十講：詳解JavaScript的Proxy與Reflect
下篇文章：紅寶書第二十二講：詳解JavaScript類型化數組與二進制數據處理

腳注

---

1. 《JavaScript高級程序設計（第5版）》詳解CommonJS語法與Node.js的關系 ?? ?? ??

2. 《JavaScript高級程序設計（第5版）》演示CommonJS導出類與實例的方式 ?? ??

3. 《JavaScript高級程序設計（第5版）》描述模塊加載器的依賴圖與執行順序 ?? ?? ?? ?? ??

4. 《JavaScript高級程序設計（第5版）》的目錄指明ES Modules為原生標準 ?? ??

5. 《JavaScript高級程序設計（第5版）》指出SystemJS支持動態加載ESM等模塊格式 ?? ??