2021年浏览器加载的ES6模块如何使用npm包？

Question

我是 JavaScript 初学者。 我不使用“捆绑器”。

几天来，我一直在尝试通过使用 ES6 模块 (ESM) 导入某些 JavaScript 中的 moment.js 和其他日期时间库。

我有一个我写的 JS 模块，它是从 TS 转换而来的，它有这样一行：

import moment from "../lib/moment/src/moment.js"

我的模块本身是通过从<script type="module" >标记的导入加载的，该标记有效。

我发现 package 在其src文件夹中包含看起来更像“源”代码的那一刻，看起来更像我习惯的 JS/TS，并且在底部有一个“默认导出”。

所以我在我转译的 JS 模块中引用了那个“源”版本。 这让我克服了我遇到的几个错误：

请求的模块“blah”不提供名为“default”的导出

和

无法设置未定义的属性“时刻”（在 moment.js:10）

并且让我坚持加载它所依赖的其他模块，因为我猜，它们的文件扩展名丢失了。

获取 https://blah/lib/moment/src/lib/locale/locale net::ERR_ABORTED 404 (moment.js:37)

---

3天后，我把头发扯掉了，我觉得我一直在打一场我根本不应该尝试的战斗。

我希望在 2021 年，在广泛的 ESM 浏览器支持下，这会起作用，但我尝试了 5 个不同的日期时间库，但都没有成功。

我认为发生 404 是因为作者不希望人们像这样使用他们的库，所以他们完全知道它不会在浏览器中加载，所以他们放弃了文件扩展名？

我是否应该在我的客户端构建过程中添加一个额外的步骤，Gulp，以便在当前源代码中重新添加扩展？

还是我做错了什么？

是不是每个人都使用“捆绑器”并且这些工具以某种方式修复了所有这些东西，因此 99% 的 web 开发人员从未出现这些问题？

提前致谢。

Answer 1

您希望导入捆绑版本的 lib 以便能够做到这一点。 尝试：

import from 'https://unpkg.com/moment@2.29.1/dist/moment.js' ;

您可以下载捆绑版本并添加到您的项目中。 不要忘记也放许可证并检查它们是否至少是 MIT 或类似的。

如果您想参考源代码，您肯定需要构建它。 特别是使用 typescript 的库。