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

Question

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

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

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

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

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

我发现 moment 包在其 src 文件夹中包含看起来像“源”代码的东西，看起来更像我习惯的 JS/TS，并且在底部。

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

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

和

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

这让我一直在加载它所依赖的其他模块，因为我猜它们的文件扩展名丢失了。

GET 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 的库。