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

How to use npm packages as ES6 modules loaded by the browser in 2021?

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

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

我有一个自己写的JS模块,是从TS转过来的,里面有一行:

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

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

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

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

The requested module 'blah' does not provide an export named 'default'

Cannot set property 'moment' of undefined (at 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% 的网络开发人员来说永远不会出现??

提前致谢。

您想要导入捆绑版本的库才能执行此操作。尝试:

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

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

如果您想参考源代码,您当然需要构建它。特别是使用打字稿的库。