javascript - 导入的变量有效，但在调试器中访问时未定义(在同一范围内)

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)

Answer 1

尽管操作可能会迟到，但这仍然是一个有效的问题。
虽然看起来您正在调试您编写的代码，但事实并非如此。
原因是你的代码被 webpack 缩小和丑化了(并且可能被 babel 转译了)。编译后的代码由浏览器执行，然后浏览器通过源映射将其映射到您的源代码。
浏览器尽最大努力使这种体验尽可能无缝。在大多数情况下，您甚至不会注意到这种错觉，但在其他情况下，它可能会让您感到困惑。由于变量和模块导入在 uglification 过程中被重命名，因此它们在控制台中不再以其原始名称可用。
因此，为了找出导入模块的值，您必须观察编译后的变量。
自 2021 年起，您将为此目的从浏览器获得大量帮助。如下图所示，而 Thing将是 undefined , _Thing会给你预期的结果，甚至是由自动完成提出的。
另外，请注意[sm]在 App.js[sm] ，它表示您正在观察源映射版本而不是执行的代码。

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

相关且经常遇到的问题:

调试器无法在所需的断点处停止。

调试器中的断点不可使用的行。

以及指向丑陋代码的控制台错误。

如果您想了解原因，请深入研究 source maps:
How do source maps work?