如何让 VSCode 加载 NPM 依赖项的源映射?

How do I get VSCode to load source maps for NPM dependencies?

我有一个用 TypeScript 编写的依赖项。依赖包括 NPM 包中的源映射和原始源。如果我在我的代码中设置一个断点然后进入依赖项,它会正确地进入 TypeScript 而不是编译的 JavaScript。但是,如果我在 TypeScript 代码中设置断点,然后启动我的应用程序,VSCode 表示

Breakpoint ignored because generated code not found (source map problem?).

如果我设置一个断点 进入依赖关系后一切正常。

我认为这里的问题是源映射是单向的,所以当我在 TypeScript 源文件中有一个断点时,它不知道 JavaScript 中的哪个位置(这是必须的实际上通过节点调试器设置断点)。打开 JavaScript 文件后,VSCode 能够匹配这两个,现在断点起作用了。

所以问题是,我怎样才能使我的 TS 断点从启动开始工作,而不必首先进入文件?依赖项是很多文件,并且必须每隔 运行 重置我的断点是有问题的,特别是因为如果我花费太长时间(超过几秒钟),我正在调试 运行s 到套接字连接超时的特定问题.

我想要的是一种告诉 TypeScript 的方法,"parse these JavaScript files when the debugger is launched and sync up the source maps so breakpoints match up correctly"。

我知道通用功能是可用的,因为我可以通过 TypeScript 文件中的断点成功调试依赖项本身(我是依赖项的维护者)。当它作为 NPM 模块加载时,似乎丢失了一些信息。

这正是 launch.json 文件中的 outFiles 属性的用途 - 将其设置为包含节点模块中的 javascript 文件(以及您自己的文件)的 glob 模式代码)。调试适配器将查看这些文件以获取 sourcemap 引用,因此它可以立即解决 TS 文件中的断点。

示例:

"outFiles": [ "${workspaceRoot}/myOutFiles/**/*.js", "${workspaceRoot}/node_modules/**/*.js" ]

如果您只知道 select 一组包含源映射的节点模块,您可以像这样提高性能:

"outFiles": [ "${workspaceRoot}/node_modules/{module_a,module_b}/**/*.js" ]

来自本期:https://github.com/Microsoft/vscode-node-debug/issues/82#issuecomment-290642560