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

时间:2018-09-28 15:47:13

标签: javascript lodash es6-modules

我正在尝试在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”。   相对引用必须以“ /”、“./”或“ ../”开头。

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

5 个答案:

答案 0 :(得分:5)

截至 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 提出的解决方案。此外,目前正在研究在浏览器中实现“裸导入”的大量工作,如果您想监控整体进度,请关注此link

答案 1 :(得分:4)

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

如果您不想使用捆绑程序,那么从特定文件(您需要的功能)中导入也是值得的。例如:

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

答案 2 :(得分:2)

尝试模块lodash-es

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

答案 3 :(得分:1)

最终,您无法在这样的浏览器上使用JS模块。这些模块用于webpack或其他捆绑器。

答案 4 :(得分:0)

如果您尝试导入 css 文件,请确保在导入语句中提及 .css