Javascript import/export 依赖关系

Question

这是问题的分解代码。

library.js

export var a = ...
export var b = ...
export var c = ... result of call to leaflet API

main1.js

<script src='leaflet.js'></script>
<script type="module"></script>
import {a,b,c} from "../library.js"
.. use a,b,c successfully
...
</script>

main2.js

<script type="module">
import {a,b} from "../library.js"
... loading fails because L (from leaflet.js) not defined
...
</script>

main1.js 正确执行。导入的变量 a、b 和 c 具有预期值。

main2.js不会运行。我不需要或导入 c，所以我不包括传单 API。然而，加载仍然尝试解析 c，不能，并且失败。

为什么在没有特别要求的情况下检查 c？

什么是纯javascriptworkaround/solution？ （我尝试从 main2.js 中的 leaflet.js 导入 L 但没有成功）

研究表明 NodeJS 或 CommonJS 环境提供了一个解决方案，但我想要一个纯粹的 module/import/export 解决方案。

Answer 1

当你导入一些东西时会发生这种情况 -

1. 从'./library.js'导入{a, b}
2. 去当前目录'library.js'找到
3. 执行'library.js'
中的所有代码
4. 只有执行第 3 步，编译器才会知道从 'library.js'
返回和暴露的内容
5. 虽然有一个 tree-shaking 的概念，它删除无用的导出以减小你的包大小，这适用于静态导入。
6. 为了自己验证，在 'library.js' 中添加一些 'console logs'，您可以看到它们在您导入 'library.js'
时随时执行
7. 因此，在执行'library.js'时，还需要对var c进行求值赋值，因此执行的是leafletAPI

我能想到的解决办法-

1. 让 var c 成为调用传单的函数 API，而不是函数调用。
2. 在一个文件中分隔 a,b，在另一个文件中分隔 c。

参考 -

1. https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking
2. https://exploringjs.com/es6/ch_modules.html#_benefit-dead-code-elimination-during-bundling
3. https://javascript.info/import-export