ES Modules 加载机制解析：同步执行表象下的异步本质-js教程-PHP中文网

ES Modules 的“异步加载”并非指代码执行顺序异步，而是指模块图构建、链接与求值全过程由 Promise 驱动；静态 import 语句看似同步阻塞，实则是顶层模块执行被延迟至整个依赖图完成链接与求值后——这是 ESM 与 CommonJS 根本性差异的核心。

es modules 的“异步加载”并非指代码执行顺序异步，而是指模块图构建、链接与求值全过程由 promise 驱动；静态 `import` 语句看似同步阻塞，实则是顶层模块执行被延迟至整个依赖图完成链接与求值后——这是 esm 与 commonjs 根本性差异的核心。

在 JavaScript 模块化演进中，ES Modules（ESM）与 CommonJS（CJS）最常被简述为“ESM 异步、CJS 同步”，但这一说法极易引发误解。正如你在 Bun 中观察到的现象：import "exporter.mjs" 后 console.log("importer") 仍按序输出，且 Bun 甚至允许 require("./exporter.mjs") 成功运行——这恰恰说明：“异步”不是指执行时序不可预测，而是指模块生命周期的底层调度模型发生了根本转变。

✅ 正确理解：ESM 的三阶段异步流程（Load → Link → Evaluate）

根据 ECMAScript 规范，ESM 加载并非单一线性操作，而是一个严格分阶段、以 Promise 编排的异步流水线：

阶段	关键行为	是否异步	说明
Load（加载）	递归获取所有依赖模块源码（如 HTTP 请求或文件读取）	✅ 异步	返回 Promise，可被中断、缓存、并行发起
Link（链接）	构建模块环境记录（Module Environment Record），建立 import ↔ export 的内存绑定关系	✅ 异步（微任务级）	所有依赖必须 Load 完成后才启动；此时导出变量已“声明就绪”，但尚未执行初始化代码
Evaluate（求值/执行）	逐层执行模块体代码（即 export const x = ... 中的右侧表达式）	✅ 异步（微任务级）	严格遵循拓扑序：依赖模块先 Evaluate，当前模块后执行；import 语句本身不执行代码，仅触发该流程

? 关键洞察：import 语句不立即执行模块代码，它只是向引擎提交一个“待处理的模块图构建请求”。真正执行 console.log("exporter") 是在 Evaluate 阶段——而该阶段被设计为在所有依赖完成 Link 后，统一按依赖顺序在微任务队列中同步执行。因此你看到“exporter 先于 importer 输出”，是规范强制保障的确定性执行顺序，而非 CJS 式的同步阻塞。

⚠️ 对比 CommonJS：执行即加载，无分离阶段

CommonJS 的 require() 是一个运行时函数调用：

// a.cjs
console.log('a start');
const { b } = require('./b.cjs'); // ? 此刻：同步解析路径 → 同步读文件 → 同步包装执行 → 同步返回 exports
console.log('a end', b);

每次 require 都会真实阻塞主线程，直到目标模块完全执行完毕并返回 module.exports；
循环依赖时，b.cjs 中 require('./a.cjs') 拿到的是 a.cjs 中尚未执行完的 exports 对象（初始空对象），导致 a 为 undefined；
无静态分析能力，无法做 Tree Shaking，也无法在编译期优化导入路径。

? 实际影响：为什么“CJS 不能直接 require ESM”？（Node.js vs Bun）

Node.js（严格遵循规范）：
require() 是同步函数，而 ESM 的 Load/Link/Evaluate 全程需 Promise 协调。若允许 require("./mod.mjs")，则必须将异步流程强行“降级”为同步——这会破坏模块图一致性（如循环依赖处理、顶层 await 支持等）。因此 Node.js 明确禁止，并要求使用 await import() 动态导入。
Bun（扩展兼容性）：
Bun 在底层实现了对 require() 调用 ESM 的桥接：当检测到 .mjs 时，自动将其包裹为 await import(...) 并等待 Promise resolve 后返回命名空间对象。这属于运行时魔法，非标准行为，不可跨平台迁移。

✅ 正确跨环境写法（推荐）：

// 在 CJS 环境中安全加载 ESM（Node.js / Bun / Deno 通用）
async function loadESM() {
  const { number } = await import('./exporter.mjs');
  console.log(number); // ✅ 始终可靠
}