12-1 代碼的拼圖：Modules 與 ESM 規範

1. 導出 (Export)

你有兩種方式把功能分享出去：

選項 A：命名導出 (Named Export) - 推薦！

一個檔案可以有很多個。

// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;

選項 B：默認導出 (Default Export)

一個檔案只能有一個。

// user.js
export default function login() { ... }

2. 導入 (Import)

import login from "./user.js"; // 導入預設
import { add, PI } from "./math.js"; // 導入命名

3. 2026 時代的 ESM 優勢

• 靜態分析：IDE (VS Code) 能直接知道你用了什麼，提供完美的自動補全。
• Tree Shaking：如果你的模組有 100 個函數但你只用了 1 個，打包工具會自動把剩下 99 個丟掉。

動態導入 (Dynamic Import)

想要按需載入嗎？

if (userNeedsChart) {
  const chartModule = await import("./charts.js");
  chartModule.render();
}