Question

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

// 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

实际上，这取决于这些模块的位置。如果这些都在同一个项目中，那么 a.js 中的代码实际上将运行一次。但是，如果 a.js ， b.js 和 c.js 位于3个单独的程序包中，则 a.js < / strong>可以运行多次。

例如如果您在项目中将 package_b 和 package_c 列为依赖项，并且都将 package_a 列为依赖项，则代码将运行两次。 / p>
那是因为npm安装了两个单独的 package_a 副本-一个用于 package_b ，一个用于 package_c ：

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

是的，从技术上讲，模块中的代码只运行一次，但是您有两个单独的模块副本，每个副本都被导入一次。

我认为这是一个值得回答的答案，因为着陆于此问题的人们不太可能意识到这一点，但是如果着陆于这个问题，可能非常需要（特别是考虑到错误情况会变得多么严重，以为它会起作用）像Ruby或Python）。

这是understanding-the-npm-dependency-model上的一篇古老而又不错的文章，其中进一步详细介绍了npm这样做的方式和原因。

Answer 3

如果有人将TypeScript与"module": "es6"一起使用并想知道如何做到这一点，请使用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")。

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

3 个答案: