为何Node.js先执行test.js而非index.js？模块执行顺序解析

原因解释 #

这是因为Node.js中启用"type": "module"后的ES模块遵循静态模块解析规则：所有import语句会被JavaScript引擎优先处理（即“提升”），在当前模块的任何顶层代码执行之前，就会完成被导入模块的加载、解析和全部顶层代码执行。

你的index.js里，虽然console.log("index.js")写在import x from './test.js'前面，但引擎会先处理这个import操作：加载test.js并执行它的所有顶层代码（也就是console.log("test.js")），之后才会回到index.js执行它的顶层代码，这就导致了输出顺序和你预期相反。

强制先执行index.js的方法 #

要让index.js的代码先执行，再加载test.js，可以使用动态import()——这是ES模块提供的异步加载方式，不会被提升，只有当代码执行到它时才会触发模块加载：

方法1：使用.then()语法 #

修改index.js代码：

console.log("index.js");
// 动态加载test.js
import('./test.js').then((module) => {
  const x = module.default;
  // 此处可使用导入的内容
});

方法2：使用async/await语法 #

如果习惯同步写法，可以把动态import包裹在async函数中：

console.log("index.js");

async function loadTestModule() {
  const module = await import('./test.js');
  const x = module.default;
  // 处理导入的内容
}

loadTestModule();

执行node index.js后，会先输出index.js，待动态import完成后才会执行test.js的代码并输出test.js。

内容的提问来源于stack exchange，提问作者Tharsanan