以下是 EMAScript 6（ES6）模塊規范的核心要點及細節解析：

📦 一、核心語法

1. 導出（export）

   • 命名導出：支持導出多個具名成員。

     export const a = 1;
     export function b() { /* ... */ }
     // 或集中導出
     const c = 2, d = 3;
     export { c, d as renamedD }; // `as` 支持重命名

   • 默認導出：每個模塊僅允許一個 export default。

     export default function() { /* ... */ } // 導出匿名函數
     // 或導出聲明的值
     const obj = {};
     export default obj;

   • 混合導出：可同時使用命名導出和默認導出。

     export const x = 10;
     export default class MyClass { /* ... */ }

2. 導入（import）

   • 導入命名成員：

     import { a, b } from './module.js';
     import { renamedD as d } from './module.js'; // 重命名導入

   • 導入默認導出：

     import MyDefault from './module.js';

   • 混合導入：

     import MyDefault, { x } from './module.js';

   • 整體導入：加載模塊所有命名成員到命名空間對象。

     import * as utils from './math.js';
     utils.capitalize('text'); // 調用導出函數

---

?? 二、關鍵特性與規則

1. 靜態化

   • 依賴關系在編譯時確定，import/export 必須位于模塊頂層，不可動態嵌套。
   • 支持靜態分析（如搖樹優化 Tree-shaking）。

2. 作用域隔離

   • 模塊內變量默認局部作用域，避免全局污染。
   • 嚴格模式（Strict Mode）強制啟用。

3. 動態導入（import()）

   • 按需異步加載模塊，返回 Promise。

     import('./module.js').then(module => {module.doSomething();
     });

4. 模塊繼承

   • 通過 export * from 'parent' 繼承父模塊所有命名導出。
   • 支持擴展父模塊功能并補充新接口。

---

🔍 三、與 CommonJS 的差異

特性	ES6 模塊	CommonJS
加載方式	編譯時靜態解析	運行時動態加載
導出類型	值引用（實時綁定）	值拷貝（導出后修改不影響）
異步支持	原生支持動態導入（import()）	無原生異步加載
頂層作用域	嚴格模式強制啟用	非嚴格模式可選
循環依賴處理	通過實時綁定解決	可能因緩存導致不一致

---

💡 四、最佳實踐

• 模塊拆分：按功能劃分獨立模塊，提升復用性。
• 默認導出適用場景：單一功能類/工具庫入口。
• 命名導出適用場景：多工具函數集合或需按需加載場景。
• 路徑別名：通過構建工具（如 Webpack）配置 resolve.alias 簡化路徑。

示例：混合導出與導入

// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }// app.js
import calculate, { PI } from './math.js';
console.log(calculate(1, 2), PI); // 輸出：3, 3.14

ES6 模塊規范通過靜態化、作用域隔離和原生異步支持，提供了標準化、高性能的模塊化方案，成為現代前端工程的基石。