如何让 VSCode 加载 NPM 依赖项的源映射？答案

【问题标题】：How do I get VSCode to load source maps for NPM dependencies?如何让 VSCode 加载 NPM 依赖项的源映射？
【发布时间】：2017-08-26 09:19:50
【问题描述】：

我有一个用 TypeScript 编写的依赖项。依赖包括 NPM 包中的 source maps 和 original source。如果我在我的代码中设置断点然后单步执行依赖项，它会正确单步执行 TypeScript 而不是编译后的 JavaScript。但是，如果我在 TypeScript 代码中设置断点然后启动我的应用程序，VSCode 会说

断点被忽略，因为找不到生成的代码（源映射问题？）。

如果我在进入依赖项之后设置断点，一切正常。

我认为这里的问题是源映射是单向的，所以当我在 TypeScript 源文件中有断点时，它不知道它在 JavaScript 中的位置（通过节点实际设置断点所必需的）调试器）。打开 JavaScript 文件后，VSCode 能够匹配这两个文件，现在断点可以工作了。

所以问题是，我怎样才能让我的 TS 断点从启动开始工作，而不必先进入文件？依赖项是很多文件，每次运行都必须重置断点是有问题的，特别是因为如果我花费的时间太长（超过几秒钟），我正在调试的特定问题会遇到套接字连接超时。

我想要的是告诉 TypeScript，“在调试器启动时解析这些 JavaScript 文件并同步源映射，以便断点正确匹配”。

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

【问题讨论】：

我认为混乱是由分发源代码的包引起的。在典型情况下，它不应该。如果你仔细想想，当你尝试调试代码时，这意味着你正在运行代码。通过运行代码，这意味着您正在运行 JavaScript 代码而不是 TypeScript 源代码（因此您需要源映射）。通过在源代码中放置断点可能无法正常工作，因为它没有被执行。当您执行时（在调试模式下），您正在查看的“源代码”与源映射连接，因此它可以工作。
我同意这不方便，也许 VSCode 可以做点什么。对于这个问题，您在其他 IDE 中是否有更好的经验？
调试转译的源代码，特别是如果原始源代码使用了 Promise 并被转译为 ES5，那简直就是地狱。当您用 C/C++ 编写代码时，它与调试汇编指令一样有效。在大多数语言中，已编译分布式二进制文件，但调试工具通常（总是？）支持将源代码与二进制文件一起分发，以使其调试变得理智。这适用于 C# 和 Java，以及一些 C/C++ 工作。我怀疑 Go 和 Rust 也一样？

标签： typescript visual-studio-code source-maps typescript2.0 node-debugger

【解决方案1】：

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

例子：

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

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

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

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

【讨论】：

这行得通。您是否介意更新答案以包含详细信息而不仅仅是链接出来，因此它保留在 Stack Overflow 中（根据规则）？特别是，关于如何在 launch.json 中的 outFiles 中包含 node_modules 的说明对未来的读者来说非常有价值。大多只是从 GitHub 问题中复制/粘贴。 :) 编辑后在此处发表评论，我会接受答案。