ES6 模块导入是否执行导入文件中的代码？

Question

js 文件中的代码在导入期间是否运行？如果是，那么一次还是每次？ 例如

// a.js
console.log("A");
const a = "a"; 
export default a;

// b.js
import a from "./a"; // => console logs?

// c.js
import a from "./a"; // => console logs again?

Answer 1

是的，确实有一次。

见http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-module-records:

如果此模块已被评估，则不执行任何操作。否则，传递评估该模块的所有模块依赖关系，然后评估该模块

Answer 2

如果有人在使用带有 "module": "es6" 的 TypeScript 并想知道如何做到这一点，请使用 globalThis 关键字：

function outputMsg(msg: string) : void {
    console.log(msg);
}

// export function for global scope
globalThis.outputMsg = outputMsg;

然后像往常一样在 Chrome DevTools 控制台中调用 outputMsg("my console output")，它应该会自动完成并运行您的函数。

您也可以重命名“全局导出”：

globalThis.myCrazyFunc = outputMsg;

并在控制台中调用myCrazyFunc("crazy message")。

Answer 3

接受的答案并不完全正确。

一个模块在导入时会执行一次，但是...一个项目中可能安装了多个模块的副本，在这种情况下代码会被执行多次！ p>

考虑如果 a.js、b.js 和 c.js 位于三个单独的包（package_a、package_b 和 package_c）和 package_b 和 package_c 都指定 package_a 作为依赖项，并且您的项目指定 package_b 和 package_c：

node_modules/
├── package_b/
│   └── node_modules/
│       └── package_a/
|           └── a.js
└── package_c/
    └── node_modules/
        └── package_a/
            └── a.js

因为 package_a 将被安装两次（就您的项目而言，这是两个完全不同的包），a.js 中的代码将被导入，因此执行两次！

很多关注这个问题的人不太可能意识到节点的这个怪癖，但如果他们关注这个问题，可能需要知道。

这是一篇关于 understanding-the-npm-dependency-model 的旧但不错的文章，其中详细介绍了 npm 如何以及为何这样做。