导入的变量在调试器中可以使用但未定义（在相同作用域内）

Question

我正在使用webpack + es6来构建我的文件。我在Math.js中导出模块，然后在Main.js中进行导入。

在后者中，我使用了该模块进行计算，然后在调试器中设置了一个停止点。前者可以正常工作，但当我尝试在控制台中使用它时，它未被定义。

范围是相同的-为什么控制台中未定义该模块？

// Math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// Main.js
import * as mathTest from "./Math.js";
console.log("2π = " + mathTest.sum(mathTest.pi, mathTest.pi));
debugger

// Output
// The statement from the file writes properly but the debugger fails (but <this> is the same)

- meow

---

我注意到这一点。不明白这种行为背后的原因。但如果你将你的导入分配给一个变量，你就可以在调试器控制台中使用它。 - Tom Coughlin

你是使用Babel还是用Webpack 2编译模块？如果你使用Webpack 2，它可能只会将变量重命名为其他名称，并且你的源代码映射（sourcemaps）隐藏了这一事实。 - loganfsmyth

我认为它没有 - 我查看了源代码 - 它没有被压缩。 - meow

我认为问题在于v8进行了一些优化，所以调试器运行得更快。它包括不计算一些"未使用"的变量。请参考这篇帖子：https://dev59.com/nV4c5IYBdhLWcg3wCGf2 - matheusr

尝试更改导出顺序。这可能是因为pi在sum之后定义的，虽然只是一个猜测... - Ivan Satsiuk

Answer 1

虽然可能已经为操作迟了，但这仍然是一个有效的问题。

尽管看起来你正在调试你编写的代码，但实际上并非如此。

这是因为webpack（以及可能的babel转译器）对你的代码进行了缩小和混淆。编译后的代码由浏览器执行，然后通过源映射将其映射到你的源代码。

浏览器会尽其所能使这种体验尽可能无缝。在大多数情况下，你甚至不会注意到这个幻觉，但在其他情况下，它可能会让你感到困惑。由于变量和模块导入在混淆过程中被重命名，它们在控制台中不再按原始名称可用。

因此，为了找出导入模块的值，你需要观察编译后的变量。

截至2021年，你可以从浏览器中获得很好的帮助。正如你在下面的图片中看到的，虽然Thing将是undefined，_Thing将给你期望的结果，并且甚至由自动完成提供。

此外，注意在App.js[sm]中的[sm]，它表示您正在观察源映射版本而不是执行代码。

或者，我们可以观察编译/执行的代码，并验证 Thing 是否作为 _Thing 导入。

相关且常见的问题：

• 调试器无法停在所需断点。
• 调试器中没有可用于断点的行。
• 控制台错误指向混淆代码。

如果您希望了解原因，请深入了解源映射： 源映射如何工作？

- henk