ES6模块详解：核心语法与最佳实践

以下是 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 模块规范通过静态化、作用域隔离和原生异步支持，提供了标准化、高性能的模块化方案，成为现代前端工程的基石。