ES6 模塊化基礎概念
ES6 模塊化是 JavaScript 官方標準，通過 import 和 export 語法實現代碼拆分與復用。模塊化特點包括：
- 每個文件是一個獨立模塊，作用域隔離。
- 支持靜態分析，依賴關系在編譯時確定。
- 輸出的是值的引用（動態綁定）。
導出模塊（export）
導出方式分為 命名導出 和 默認導出：
// 命名導出（可多個）
export const name = 'Module';
export function calculate() { /* ... */ }// 批量命名導出
const data = { value: 1 };
export { data };// 默認導出（僅一個）
export default class MainComponent { /* ... */ }
導入模塊（import）
根據導出方式選擇對應導入語法：
// 導入命名導出
import { name, calculate } from './module.js';// 導入時重命名
import { data as dataset } from './module.js';// 導入默認導出（無需花括號）
import MainComponent from './module.js';// 混合導入
import DefaultExport, { namedExport } from './module.js';// 動態導入（按需加載）
const module = await import('./module.js');
模塊路徑規則
- 相對路徑：
./或../開頭，如'./utils.js'。 - 絕對路徑：基于項目根目錄的完整路徑（需工具配置支持）。
- 第三方模塊：直接寫包名，如
'lodash'。
模塊化高級用法
重新導出：在入口文件整合多個模塊
export { Button } from './components/Button.js';
export * as utils from './utils.js';
聚合模塊：使用 import * as 導入全部命名導出
import * as math from './math.js';
math.sum(1, 2);
注意事項
- 模塊腳本需在 HTML 中聲明
type="module"：<script type="module" src="main.js"></script> - 瀏覽器環境需通過服務器訪問（本地文件協議不支持 CORS）。
- Node.js 需在
package.json設置"type": "module"或使用.mjs后綴。
常見工具鏈支持
- Babel：將 ES6 模塊轉譯為 CommonJS 格式。
- Webpack/Rollup：打包模塊并處理依賴樹。
- ESLint：檢查模塊化語法規范。
通過系統化實踐，ES6 模塊化能顯著提升代碼可維護性和協作效率。
