Javascript 从浏览器中es6模块中无法识别的节点_模块导入

我正在尝试在我的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>

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

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

---

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

如果您不希望使用任何捆绑工具，则需要在

node\u modules

中提供相对于包含import语句的JavaScript文件的lodash文件夹路径

如果您不希望使用bundler，那么从特定文件导入您需要的功能也是值得的。例如：

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

---

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

尝试模块lodash es

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

---

<强> 2021，请考虑以下（2018）的声明：< /强>

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

以及（2017年5月）之前的声明：

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

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

完整的非相对URL

以/开头

以./开头

以../开头

和：

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

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

---

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

如果您尝试导入

css

文件，请确保在导入语句中提到

.css

。

我尝试了您的建议，但没有成功。使用

import\u each from'../node\u modules/lodash/each'

给出了一个404，使用

import\u each from'../node\u modules/lodash/each.js'

导致以下错误：语法错误：请求的模块“../node\u modules/lodash/each.js”没有提供名为“default”的导出，甚至尝试了此

import*as\ufrom”“./node\u modules/lodash/lodash.js”

但是得到了TypeError:\uu.each不是一个函数。在

console.log（\u）

上，我在控制台上得到了一个Module对象。您的导入语句不应该是

import\ufrom./node\u modules/lodash/lodash.js吗？”“

？@RobertMennell，我尝试使用您的建议导入lodash，但这给了我以下错误：“SyntaxError:请求的模块“../node\u modules/lodash/lodash.js”没有提供名为“default”的导出”为什么使用节点模块而不是CDN分发版？@RobertMennell，lodash不是我唯一需要使用的图书馆。我有其他的库依赖项，我怀疑我会在CDN发行版上得到它们。我甚至有一些内部库。内部库应该由您提供服务，是的，但是如果它有CDN，您应该使用CDN，因为它可以卸载并防止您暴露节点_模块。@RobertMennell是否有一个链接可以帮助查找CDN上托管的所有/大部分JS库？那会有帮助的。如果没有，我可以在谷歌上恢复手动搜索。应该有很多CDN，但是其他CDN确实存在，并且在webpack中有许多listshow可以使用它们？所有这些都很好，直到模块包含指向另一个包的导入语句