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

Question

我正在尝试在Web应用程序中使用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>

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

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

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

Answer 1

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

如果您不希望使用捆绑程序，也应该从特定文件（您需要的功能）中导入。例如：

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

Answer 2

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

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

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

当前不支持“裸”导入说明符。

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

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

和javascript.info：

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

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

捆绑器有助于使用浏览器尚不支持的“裸导入”。除非您捆绑代码，否则我建议使用@Asler提出的解决方案。此外，目前正在做大量工作来研究浏览器中“裸导入”的实现，如果您想监控整体进度，请点击此链接。