调试期间导入的模块未定义

Question

我知道这段代码正在运行。但无论出于何种原因，有时我无法使用 WebStorm 评估变量。

PgMem.ts

import { newDb } from 'pg-mem';
import fs from 'fs';

const inMemoryDb = newDb();
inMemoryDb.public.none(fs.readFileSync('src/DB/pgMem/migrations/001-initial.sql', 'utf8'));
export default inMemoryDb;

DBConnection.ts

import inMemoryDb from './pgMem/PgMem';
...

if (queryTypeId === queryType.MANY) {
  res = await inMemoryDb.public.many(query);
}

如果我在带有

res

的行上设置断点并且它命中该断点，则

inMemoryDB

在 WebStorm 调试期间显示未定义。我知道这段代码无需调试即可运行，所以如果我尝试使用评估工具或观察它，为什么会显示未定义？

我想当你导入这样的模块时，它会运行导入的模块中的代码，因此它已经运行了

newDb();

并且有一个可以使用的实例，显然它确实可以使用，但就在我在WebStorm中为此进行调试时特定场景，它总是未定义

Answer 1

调试时未定义的变量一定是由源映射中错误/丢失的名称映射引起的：如果在转译/混淆时重命名变量，并且没有提供适当的名称映射，则调试器将无法将源代码中的变量与虚拟机中的一个。

例如，

import somefunction from './somefunc'

通常编译为

Object.defineProperty(exports, "__esModule", { value: true });
var somefunc_1 = require("./somefunc");
somefunc_1.default();

并且没有生成名称映射（生成的源映射中的

"names":[]

），因此调试器无法将

.ts

文件中的变量与运行时的代码进行匹配，并显示

undefined

可以相关的票证：https://github.com/microsoft/TypeScript/issues/9627、https://github.com/webpack/webpack/issues/3957、https://github。 com/babel/babel/issues/1468

Answer 2

我也遇到过类似的场景。看看这是否有帮助

import {fs as fs} from 'fs';

这样的事情应该在调试时避免这个问题