Javascript 为什么在我的React应用程序的Chrome控制台中没有定义d3？

我正在我的React应用程序中导入d3.js库，如下所示：

import * as d3 from "d3";

我正在创建一个基本的世界地图，它也在浏览器中正确显示。但是，当我尝试在Chrome控制台中执行类似操作时：

d3.select("path")

我得到一个错误：

未捕获引用错误：未定义d3

我想这与React的工作原理有关，作为React的新手，我不知道我现在缺少了什么。任何人都可以提供帮助？

因为webpack（或任何其他bunder）将其保存在模块范围内。为了防止模块之间发生冲突，绑定器使用函数包装模块。可以将所有导入视为局部函数变量：

功能模块（需要）{
常数d3=要求（'d3'）；
//您可以在模块中使用d3
}
你不能在这里使用它，在外面的某个地方

所以我基本上无法使用控制台进行调试？如果你真的想，你可以在全局范围内存储所需的内容，只需将

window.d3=d3

添加到你的模块中就可以了。忘了全局选项。然而，从您的评论来看，这似乎不是开发中常用的方法？调试时您会做什么？您可以使用chrome中的断点或

debugger

关键字停止并在代码中的特定位置进行调试。您还应该使源映射能够查看原始代码，而不是最小化。