"CommonJS模块是同步的，而ES模块是异步的"这种 idea 本身可能有点过于简单化，从而导致了这种混乱.让我们添加一些上下文.

How do ES Modules work?

ES模块经历以下步骤:

1. Load:异步加载依赖项.

   从规范中:

   通过递归加载模块的所有依赖项来准备模块进行链接，并返回promise .

2. Link:将模块导出与内存中的导入相连接.

   从规范中:

   通过可传递地解析所有模块依赖项并创建模块环境记录来准备要判断的模块.

   在调用此方法之前，LoadRequestedModules必须已成功完成.

3. Evaluate (and execute):运行代码.

   从规范中:

   返回此模块及其依赖项的求值promise ，在求值成功或已成功求值时进行解析，并因求值错误或求值失败而拒绝.如果promise 被拒绝，主办方将处理promise 拒绝并重新抛出判断错误.

   在调用此方法之前，链接必须已成功完成.

正如您从JavaScript/ECMAScript spec中的引号中看到的，不同的步骤是异步执行的，但是步骤之间相互依赖.实际上，这意味着依赖项将在依赖项之前判断和执行，这给人一种ES模块是同步的印象.

How do CommonJS modules work?

CommonJS不同，因为它使用函数(require)来导入模块.这意味着，只有在运行时(代码执行时)才知道依赖项.换句话说，首先执行代码，然后加载依赖项；与ES模块相反，ES模块首先加载依赖项，然后执行代码.require的同步特性是因为当遇到require函数时，函数之后的代码直到require函数加载并执行依赖项内的代码之后才运行.

A practical comparison

在这样的情况下，加载顺序与执行顺序的差异变得很明显:

const b = require("./b");

console.log(b);

exports.a = "a";

import { b } from "./b";

console.log(b);

export const a = "a";

const a = require("./a");

setTimeout(() => { console.log(a); }, 0);

exports.b = "b";

import { a } from "./a";

setTimeout(() => { console.log(a); }, 0);

export const b = "b";

b
undefined

b
a

在CommonJS的情况下，a.js需要b.js.因为require是同步的，所以它会阻止a的导出.因此，a在b.js中没有定义.

在ES模块的情况下，虽然a.js也需要b.js，但是在执行代码之前设置a在a.js中导出和在b.js中导入之间的链接.由于模块求值和执行是异步发生的，因此a在setTimeout‘S回调执行之前被导出，这意味着a的值将被初始化为"a".之所以会发生这种情况，是因为promise 是在微任务队列中调度的，而定时器是在宏任务队列中调度的；并且微任务先于宏任务执行.这本身就是一个完整的话题，在互联网上的其他地方已经有了答案.我将在下面的进一步阅读中包括一些内容.

Further reading

• 对于所有低层细节:ECMAScript Specification: Modules
• 有关更容易理解的信息，请参阅ES模块:ES Modules: A cartoon deep-dive
• 了解为什么promise 在计时器之前执行，以及微/宏观任务到底是什么(以及更多):JavaScript.info: Event Loop