时间戳

首页 > 解决方案 > Javascript 导入/导出依赖项

javascript - Javascript 导入/导出依赖项

问题描述

这是问题的缩减代码。

库.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？

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

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

标签： javascriptimportmoduleleafletexport

解决方案

这就是您导入某些东西时会发生的情况 -

  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

推荐阅读