导入的变量有效，但在调试器中访问时未定义(在相同范围内) [英] Imported variable works but is not defined when accessed in debugger (within same scope)

问题描述

我正在使用webpack + es6构建文件.我将模块导出到Math.js中，然后导入到Main.js中.

I am using webpack + es6 to build my files. I exported modules in a Math.js, then imported in Main.js.

在后者中，我使用模块进行计算，然后在调试器中设置停止位置.前者可以工作，但是当我尝试在控制台中使用它时却未定义.

In the latter, I used the module to compute, then set a stop in the debugger. The former worked but it was not defined when I tried to use it in the console.

作用域相同-为什么在控制台中未定义模块?

The scope is the same - why would the module not be defined in the console?

// 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)

推荐答案

尽管操作可能会晚一些，但这仍然是一个有效的问题.

虽然看起来您正在调试已编写的代码，但事实并非如此.

While it might look like you are debugging the code that you have written, that is simply not the case.

原因是您的代码被webpack压缩了(不可用)(并且可能被babel编译了).浏览器执行编译后的代码，然后浏览器通过源映射将其映射到您的源代码.

The reason is that your code was minified and uglified by webpack (and probably transpiled by babel). The compiled code is what gets executed by the browser, which then maps it through source maps to your source code.

浏览器会尽力使这种体验尽可能无缝.在大多数情况下，您甚至不会注意到这种错觉，但在其他情况下，它可能会使您感到困惑.由于变量和模块导入在丑化过程中被重命名，因此在控制台中不再可以使用它们的原始名称.

Browsers do their best to make this experience as seamless as possible. In most cases, you won't even notice the illusion but in other cases, it might confuse you. Since the variables and module imports are renamed during the uglification process, they are no longer available by their original name in the console.

因此，要找出导入模块的值，您必须观察编译后的变量.

So in order to find out the value of an imported module, you would have to observe the compiled variable.

截至2021年，您将为此目的从浏览器中获得大量帮助.如下图所示，虽然 Thing 是 undefined ，但是 _Thing 将为您带来预期的结果，甚至是自动补全的建议

As of 2021, you get great assistance from your browser for that purpose. As you can see in the following picture, while Thing would be undefined, _Thing would give you the expected result and is even proposed by the autocompletion.

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

Also, pay attention to the [sm] in App.js[sm], it indicates that you are observing the source maps version and not the executed code.

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

Alternatively, we could observe the compiled/executed code, and verify that the Thing was imported as _Thing.

相关且经常遇到的问题:

Related and often experienced issues:

• 调试器无法在所需的断点处停止.
• 行不可用于调试器中的断点.
• 控制台错误，指向错误代码.

如果您想了解原因，请更深入地研究源地图:实际上是源地图如何工作?

If you desire to understand the reason, dive deeper into source maps: How do source maps work?

这篇关于导入的变量有效，但在调试器中访问时未定义(在相同范围内)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！