Javascript 处理es6模块中的依赖项，用于节点和浏览器

我编写了一个javascript库作为ES6模块，主要用于浏览器。现在我想为node打包它。我同意限制到节点v14+。我不想传输

我不知道如何处理依赖关系。一个特别的例子，瞬间js，给我带来了麻烦

在浏览器（试用了最新的FF+Chrome）中，我引用了

标记中的矩库，然后在我的代码中，我可以只使用变量

矩

，而不必首先导入它

my module.js

：

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

export { testFn }

import moment from 'moment';

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

export { testFn }

浏览器代码

：

<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 { testFn } from 'my-module.js';

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

但是，现在浏览器代码被破坏了：

TypeError:错误解析模块说明符：时刻

我尝试了不同的

import

s（

import*as…

，

import{moment}from…

），但没有成功-浏览器仍在抱怨

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

---

这一定是一个其他人已经解决过的问题，而不必求助于可怕的变通方法，如检测环境和有条件地导入。有人有好的解决方案或参考资料吗？谢谢

您是否尝试从“/moment.js”导入“/code>作为瞬间”（您可能需要根据安装位置和moment处理文件的方式修改路径）

浏览器不支持裸导入，我相信一些像moment这样的旧库仍然是裸库

---

我还要说的是，这正是transpiling和build工具的优点所在。它可以使处理这种情况变得更简单。某些内容不能进行有条件检查，您只需将其传输到最低兼容性即可。

这应适用于以下情况：

const M=力矩类型！='未定义的'？瞬间
：（等待导入（“时刻”）。默认值

• 到目前为止，顶级await仅在chrome、node和firefox金丝雀中有效
• 官方称，最高级别的等待仍然只是第三阶段的提议

在导入和重新导出common index.js模块之前，在

package.json

中设置main:main.js和browser:browser.js字段，以设置任何特定于环境的元素

//nodejs的main.js修复程序
从'nodejsSpecificModule'导入{something}
global.something=某物//或导出所需的任何内容
从“./index.js”导出{…}

//浏览器的browser.js修复程序
从“browserSpecificModule”导入{something}
window.something=某物//或导出所需的任何内容
从“./index.js”导出{…}

---

这避免了使用顶级wait进行动态导入

是否已将npm安装到该目录？。看起来您以前使用的是cdn，只是试图涵盖基本内容，模块文件夹通过npm安装了依赖项（MomentJS）。否则，import语句将根本不起作用。问题是，在浏览器中运行的脚本中使用模块时，在模块源中使用该语句会引发错误，而在节点环境中，如果没有它，它将无法工作。我觉得这可能是一件很愚蠢的事情，很简单，但仍然需要几个小时才能弄清楚lol。就像某些模块的需求顺序一样，有很好的理由，人们使用Transpiler。像这个。有一个动态导入（）可能对您的案例有所帮助：或者，您可以在全局范围内注册您的第三方LIB（工作人员为self，浏览器为window，节点为global in）。或者，在较新的环境中，您需要提供包的相对路径，因为浏览器无法像nodejs那样解析节点路径。在这里，检查以下答案：