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

Question

3

我是一个JavaScript初学者。我不使用“打包器”。

最近几天，我一直在尝试使用moment.js和其他日期时间库，在一些JavaScript中通过使用ES6模块（ESM）进行导入。

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

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

我的模块是通过从一个 <script type="module" > 标签中导入加载的，这个方法可行。

我发现 moment 包含了一个看起来像是 "源代码" 的文件夹在它的 src 文件夹里，看起来更像是我熟悉的 JS/TS，并且在底部有一个 "default export"。

所以我在我的转译后的 JS 模块中引用了那个 "源代码" 版本。这使我克服了一些错误：

请求的模块 'blah' 没有提供名为 'default' 的导出项。

和

无法设置未定义的属性 'moment'（位于 moment.js:10）

但是我仍然卡在了加载其依赖的其他模块上，因为它们的文件扩展名缺失。

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

经过三天的折磨，我觉得我正在进行一场不该尝试的斗争。

我希望在2021年，由于广泛的 ESM 浏览器支持，这应该是可以正常工作的，但我尝试了5个不同的日期时间库，都没有成功。

我认为这些404错误发生是因为 moment 的作者们并不期望人们像这样使用他们的库，所以他们省略了文件扩展名，知道它在浏览器中无法加载??

我应该在我的客户端构建过程（Gulp）中添加一个额外的步骤，将扩展名重新添加到 moment 源代码中吗？

还是我做错了什么？

也许每个人都使用 "bundler" 工具来解决所有这些问题，因此99%的 Web 开发人员从未遇到这些问题？

提前感谢您的帮助。

- Luke Puplett

1

你能分享一下代码作为一个 [mcve] 吗？故事虽好，但例子更佳。 - evolutionxbox

1

这就是 esm 的问题。我使用 snowpack。除非他们编写了100％的源代码，否则每个人都会使用打包工具。仅添加文件扩展名是行不通的。来自 node_modules 的所有导入都没有完整路径。 - Charlie Bamford

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ricardo Silva · Accepted Answer

您需要导入捆绑版本的库才能实现此操作。请尝试以下方法：

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

你可以下载捆绑版本并添加到你的项目中。别忘了加上许可证，确保它们至少是MIT或类似的许可证。

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