ESM 并非简单地“同步”或“异步”，其核心在于三阶段（加载→链接→求值）的异步协调机制：依赖图构建与模块链接异步进行，而代码执行严格遵循拓扑序，形成语义上同步、底层异步的行为表象。
esm 并非简单地“同步”或“异步”，其核心在于三阶段（加载→链接→求值）的异步协调机制：依赖图构建与模块链接异步进行，而代码执行严格遵循拓扑序，形成*语义上同步、底层异步*的行为表象。
在 JavaScript 模块化演进中，“ESM 是异步的，CommonJS 是同步的”这一说法广泛流传，却极易引发误解——尤其当你运行 import './a.js' 后立即看到 console.log('a') 先于 console.log('entry') 输出时，直觉会告诉你：“这明明是同步执行！” 实际上，这种直观感受恰恰掩盖了 ESM 真正精妙的设计哲学：它将模块系统的控制权从运行时移交至编译时，并通过异步基础设施保障静态语义的确定性。
一、ESM 的三阶段生命周期：异步加载 ≠ 异步执行
根据 ECMAScript 规范 §16.2，每个 ESM 模块必须经历三个严格有序的抽象操作：
| 阶段 | 关键行为 | 是否异步 | 说明 |
|---|---|---|---|
| ① Load（加载） | 递归获取所有依赖模块源码（HTTP 请求 / 文件读取） | ✅ 异步（返回 Promise） | 不执行代码，仅准备资源；支持并发、缓存、错误前置捕获 |
| ② Link（链接） | 构建模块环境记录（Module Environment Record），建立 import ↔ export 的实时内存绑定 | ⚠️ 同步但需等待 Load 完成 | 确保循环引用可解：a.mjs 导入 b.mjs 的 x，b.mjs 可安全导入 a.mjs 的 y（即使 y 尚未求值） |
| ③ Evaluate（求值） | 执行模块顶层代码（含 export 初始化） | ✅ 异步（返回 Promise），但按叶子优先拓扑序执行 | 保证依赖模块先完成求值；自动启用严格模式；单次执行、不可重复 |
? 关键洞察：import 'a.mjs' 语句本身不阻塞 JS 主线程（无 I/O 等待），但整个模块图的 Link 和 Evaluate 链 由运行时调度器串行化，最终呈现为“同步执行效果”。这正是你观察到 "exporter" 总在 "importer" 之前打印的根本原因——不是同步阻塞，而是异步任务队列中的确定性排序。
二、对比 CommonJS：动态 require 的同步阻塞本质
// cjs/a.js
console.log('a: start');
const { b } = require('./b'); // ← 同步阻塞！立即读文件、解析、执行、返回 module.exports
console.log('a: got b =', b);
module.exports = { a: 'A' };
// cjs/b.js
console.log('b: start');
const { a } = require('./a'); // ← 此时 a.js 尚未执行完 module.exports，a 为 {}
console.log('b: got a =', a); // → { a: undefined }
module.exports = { b: 'B' };
CommonJS 的 require() 是一个运行时函数调用：它在执行流中即时触发文件 I/O、编译、执行，并直接返回导出对象的深拷贝值。这意味着：
- 无法静态分析依赖（影响 Tree Shaking）；
- 循环引用时，被依赖模块若未完成 module.exports 赋值，则返回空对象；
- 浏览器中因同步网络请求导致严重阻塞（故需 AMD/UMD 等变通方案）。
而 ESM 的 import 是语法声明，在代码执行前已通过静态解析生成完整依赖图，Link 阶段即建立跨模块的实时绑定（live binding）：
// esm/counter.js
export let count = 0;
setTimeout(() => count++, 100);
// esm/app.js
import { count } from './counter.js';
console.log(count); // 0
setTimeout(() => console.log(count), 200); // 1 —— 共享同一内存地址
三、为什么 Bun 能在 CJS 中 require('./mod.mjs')？
Node.js 官方 ESM 实现严格遵循规范：CJS 无法 require() ESM，因为 require 是同步函数，而 ESM 的 Load→Link→Evaluate 链必须异步启动。但 Bun 作为现代 JS 运行时，在底层统一了模块加载器：
- 它将 .mjs 文件的 Load 阶段封装为同步可等待操作（利用底层 I/O 多路复用）；
- 在 require() 内部隐式调用 await import() 并 await 其 Evaluate Promise；
- 最终返回一个代理对象，模拟 module.exports 行为（注意：此非标准，属 Bun 特性）。
✅ 正确跨模块互操作方式（标准兼容）：
// cjs/main.cjs
// ✅ 标准方式：使用动态 import()
async function loadESM() {
const { number } = await import('./exporter.mjs');
console.log(number); // 10
}
loadESM();
四、实践建议与注意事项
永远不要依赖执行顺序做逻辑判断：即使当前输出是 "exporter" → "importer"，也应视其为规范保证的拓扑结果，而非同步阻塞。
-
警惕动态 import() 的 Promise 陷阱：
// ❌ 错误：试图在同步上下文中解构 const { data } = import('./api.mjs'); // → Promise! // ✅ 正确：显式 await 或 .then() const api = await import('./api.mjs'); api.fetchData(); Node.js 中启用 ESM：确保 package.json 包含 "type": "module"，或使用 .mjs 后缀；避免混合 require() 与 import（除非通过 createRequire(import.meta.url)）。
浏览器兼容性：<script type="module"> 自动启用异步加载与 defer 行为，无需手动处理。</script>
ESM 的“异步性”不是性能优化的副产品，而是为静态分析、可靠依赖管理、安全循环引用和未来扩展（如条件导出、权限模型）奠定的架构基石。理解 Load/Link/Evaluate 三阶段，才能真正驾驭现代 JavaScript 模块化。
