小编Zen*_*en1的帖子

概括

我有一个独特的情况，我们创建了一个（由于缺乏更好的术语）“micro-ui”作为 React 组件。UI 接收 props，因此它可以动态配置自身以在我们的几个较大的应用程序中工作。由于它在多个应用程序中使用的性质，我们决定将其作为导出单个组件的组件库进行分发。它的实现效果非常好，但是调试变得有点困难/不存在。

目前，我们正在npm link本地开发依赖应用程序，同时在主机应用程序中运行它。这很有效，但我们在源映射和捕获断点方面遇到了一些问题。我们已经使用一些 Webpack 配置解决了源映射问题，但断点仍然无法在链接的依赖项应用程序中捕获。当前，调试器附加到正在运行的主机应用程序，并且依赖项应用程序只是作为本地依赖项链接。在理想的情况下，我将能够找到一种解决方案，允许我在主机应用程序或依赖项应用程序中放置断点，并且它会在调试器中捕获。

迄今为止的尝试

我目前的尝试是直接在 vscode 中调试，我想我已经差不多了。到目前为止，我已经尝试了 launch.json 文件的多个版本，并最终选定了一个在附加主机应用程序时效果非常好的版本（如下所示）。

正如您所看到的，我尝试将映射添加到 sourceMapOverrides 键，以查看是否可以将node_modules依赖项的文件夹显式指向依赖项项目根目录中的构建文件夹。我已经尝试了几种不同的方法来进行此映射，但它没有捕获链接应用程序中的断点。此外，没有抛出明显的错误，因此我无法判断我的配置是否无效。我确信我错过了一些明显的东西，但经过一整天的搜索，我似乎找不到一个好的解决方案。

预先感谢大家的时间和帮助，如果您需要更多信息，请告诉我。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": ["--preserve-symlinks"],
            "sourceMapPathOverrides": {
                "${webRoot}/node_modules/<dependency_project>/build": "/Users/<USER>/<path_to_dependency_project>/build",
            }
        }
    ]
}