4

概括

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

目前我们正在使用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",
            }
        }
    ]
}
4

0 回答 0