处理 es6 模块中的依赖关系，适用于节点和浏览器

Question

我编写了一个 JavaScript 库作为 ES6 模块，主要用于浏览器。现在我想将它打包为节点。我同意限制为节点 v 14+。我不想转译。

我不确定如何处理依赖关系。其中一个特别是 moment-js，给我带来了麻烦。

在浏览器中（尝试了最新的 FF + Chrome），我在标签中引用了 moment 库<script>，然后在我的代码中，我可以只使用变量moment，而不必先导入它。

my-module.js：

function testFn() {
  return moment.duration(300).asSeconds();
}

export { testFn }

browser code：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script type="module" src="my-module.js"></script>
<script>

import { testFn } from 'my-module.js';
let val = testFn();
console.log(val); 

</script>

但是，在节点中，我需要模块包含一个import才能使其工作：

my-module.js：

import moment from 'moment';

function testFn() {
  return moment.duration(300).asSeconds();
}

export { testFn }

my-module然后我可以在节点中使用：

import { testFn } from 'my-module.js';

let val = testFn();
console.log(val); 

但是，现在浏览器代码已损坏： TypeError: Error resolving module specifier: moment

我尝试了不同的imports ( import * as ..., import { moment } from ...) 但没有运气 - 浏览器仍然抱怨。

Moment-js 只是这里的一个例子 - 我想要一个通用的解决方案，因为我也有其他依赖项。

这一定是其他人已经遇到并解决的问题，而没有诉诸糟糕的解决方法，例如检测环境和有条件导入。有没有人有好的解决方案或参考？谢谢！！

Answer 1

您是否尝试过import * as moment from "./moment.js";（您可能需要根据安装位置以及时刻处理文件的方式来调整路径）？

浏览器不支持裸导入，我相信一些较旧的库（例如 moment）仍然是裸露的。

我还要说，这正是转译和构建工具的优势所在。它可以使处理此类情况变得更加简单。某些事情无法进行条件检查，您只需转换为最低兼容性即可。