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

接受的答案並不完全正確。 一個已安裝的模塊在導入時會執行一次，是的，但是如果模塊被安裝多次（這在 node 中很容易做到），那么它會執行多少次安裝。

考慮一下如果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 中的代碼將被導入，因此執行兩次。

許多登陸這個問題的人不太可能意識到這個節點的怪癖，但如果他們登陸這個問題，可能需要知道。

這是一篇關於理解 npm-dependency-model的舊但很好的文章，其中詳細介紹了 npm 如何以及為什么這樣做。

Answer 3

如果有人使用帶有"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") 。