JavaScript 模块化（ES Modules）

ES Modules 是 JavaScript 官方模块标准，支持静态分析和 tree-shaking。

导出语法

命名导出

// 单个导出
export const name = 'Alice';
export function greet() { return 'Hello'; }
export class Person {}

// 批量导出
const age = 25;
const job = 'Engineer';
export { age, job };

// 重命名导出
export { age as userAge };

默认导出

export default function() {
  console.log('Default export');
}

// 等价于
function main() {}
export default main;

导入语法

命名导入

import { name, greet } from './module.js';
import { age as userAge } from './module.js';  // 重命名
import * as utils from './module.js';          // 全部导入

默认导入

import main from './module.js';
import main, { name, greet } from './module.js';  // 混合导入

动态导入

// 返回 Promise
const module = await import('./module.js');

// 条件加载
if (condition) {
  const { heavyFeature } = await import('./heavy.js');
}

导出导入结合

// 全部重新导出
export * from './utils.js';

// 部分重新导出
export { name, greet } from './module.js';

// 重命名导出
export { age as userAge } from './module.js';

模块特性

循环依赖处理

// a.js
import { b } from './b.js';
export const a = 'a';

// b.js
import { a } from './a.js';
export const b = 'b';

循环依赖时，ES Modules 保留导入值的引用，但未初始化时访问会报错

浏览器中使用

<script type="module" src="./main.js"></script>
<script type="module">
  import { greet } from './utils.js';
  greet();
</script>

要点总结

• export 导出，import 导入，语法静态可分析
• 默认导出每个模块仅一个，命名导出可有多个
• 动态导入 import() 返回 Promise，按需加载
• 模块自动严格模式，顶层 this 为 undefined