从浏览器的 es6 模块中无法识别的 node_modules 导入

Question

我正在尝试在我的网络应用程序中使用 lodash。我在本地项目中使用 npm 安装了 lodash。

我打算在我的代码中使用 ES6 模块。

这是我的 main.js 文件：

import * as _ from "lodash";

_.each([1, 2, 3, 4], (i) => {
    console.log('index each ' + i);
});

我已将它包含在 index.html 中：

<script src="js/main.js", type="module"></script>

但我在浏览器控制台中收到以下错误。

未捕获的类型错误：无法解析模块说明符“lodash”。 相对引用必须以“/”、“./”或“../”开头。

注意：我不想使用任何捆绑工具。

Answer 1

如果您尝试导入css 文件，请务必在导入语句中提及.css。

Answer 2

截至 2021 年，请考虑Márton Salomváry（2018 年 1 月）的以下声明：

不幸的是，即使大多数以 ES6 模块格式编写或发布的库也无法工作，因为它们以转译器为目标并依赖于 Node.js 生态系统。为什么这是个问题？ 使用 import _ from 'lodash' 之类的裸模块路径目前无效，浏览器不知道如何处理它们。

还有Jake Archibald（2017 年 5 月）的声明：

目前不支持“Bare”导入说明符。

有效的模块说明符必须匹配以下之一：

1. 完整的非相对 URL。
2. 以 / 开头。
3. 以./.开头
4. 以 ../. 开头

还有javascript.info：

在浏览器中，import 必须获取相对或绝对 URL。没有任何路径的模块称为“裸”模块。 不允许导入此类模块。

某些环境，如 Node.js 或捆绑工具允许裸模块，没有任何路径，因为它们有自己的方式来查找模块和挂钩来微调它们。 但浏览器还不支持裸模块。

Bundlers 促进了浏览器尚不支持的“Bare Imports”的使用。除非您捆绑您的代码，否则我建议使用 @Asler 提出的解决方案。另外，目前正在做大量工作来研究“Bare Imports”在浏览器中的实现，如果您想监控整体进度，请关注link。

Answer 3

试试 lodash-es 模块

import each from '../node_modules/lodash-es/each.js'

Answer 4

最终你不能在这样的浏览器上使用 JS 模块。这些模块用于 webpack 或其他捆绑器。

Answer 5

如果您不希望使用任何捆绑工具，则需要提供 node_modules 中的 lodash 文件夹的路径，相对于您有 import 语句的 JavaScript 文件。

如果您不想使用捆绑器，也值得从特定文件导入您需要的功能。例如：

import _each from '../node_modules/lodash/each'