Javascript 导入/导出依赖项

Question

这是问题的简化代码。

库.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、can't 和失败。

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

什么是纯 JavaScript 解决方法/解决方案？ （我尝试在 main2.js 中从 leaflet.js 导入 L 但没有成功）

研究表明 NodeJS 或 CommonJS 环境提供了解决方案，但我想要一个纯模块/导入/导出解决方案。

Answer 1

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

1. 从 './library.js' 导入 {a, b}
2. 在当前目录中找到“library.js”
3. 执行“library.js”中的所有代码
4. 仅当您执行第 3 步时，编译器才会知道从“library.js”返回和公开的内容
5. 虽然有一个 tree-shaking 的概念，它会删除无用的导出以减小包大小，这适用于静态导入。
6. 为自己验证在“library.js”中添加一些“控制台日志”，您可以在导入“library.js”时看到这些日志被执行
7. 因此，当 'library.js' 执行时，它还需要对 var c 进行评估和赋值，因此正在执行传单 API

我能想到的解决方案 -

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