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:

Do nothing if this module has already been evaluated. Otherwise, transitively evaluate all module dependences of this module and then evaluate this module

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")，它应该会自动完成并运行您的函数。

您也可以重命名您的 "global export":

globalThis.myCrazyFunc = outputMsg;

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

Answer 3

一个模块只会被评估一次但是一个项目中可以安装同一个模块的两个副本，在在这种情况下，该模块及其中的代码将被执行两次。

考虑以下包结构：

index.js
package.json
node_modules/
├── package_b/
│   └── node_modules/
│       └── package_a/
|           └── index.js
└── package_c/
    └── node_modules/
        └── package_a/
            └── index.js

如果顶层index.js从package_b和[=40导入=]，然后 package_a 将被导入（并因此计算）两次.

大多数人并没有意识到这种行为，但如果他们遇到了这个特定问题，可能需要意识到这一点。

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

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

Does ES6 module importing execute the code inside the imported file?

javascript

ecmascript-6

es6-modules