如何使用 VSCode 调试 resolvejs 应用程序答案

【问题标题】：How to debug a resolvejs application using VSCode如何使用 VSCode 调试 resolvejs 应用程序
【发布时间】：2019-06-27 23:59:13
【问题描述】：

我正在使用 Visual Studio Code。我刚刚创建了一个 resolvejs 应用程序。

如何在 vscode 中一步步运行应用程序？

这是我的调试设置（在 .vscode\launch.json 中）：

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/run.js",
  "args": [
    "dev"
  ],
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy",
    "--inspect"
  ]
}

我的命令处理程序中的断点不起作用。

【问题讨论】：

标签： debugging visual-studio-code resolvejs

【解决方案1】：

虽然文件run.js 是resolve 基于框架的应用程序中的某种入口点，但它并不是运行时阶段的实际入口点。当resolve 应用程序由yarn dev / npm run dev 命令启动时，实际上执行了两个操作：使用run.js 构建包（默认情况下使用config.[MODE].js 文件用于适当的模式）和单独启动目标包使用监视模式处理，这会导致项目中的每个文件更改时自动重建（也称为热重载）。

Bundle 存储在<APP_DIR>/dist/common/local-entry/local-entry.js。为了允许从 IDE 进行调试，生成的调试 nodejs 应该直接调用目标包。它可以通过分离应用程序编译和运行阶段来实现。

Resolve 包括无需运行即可构建应用程序的命令 - yarn build / npm run build。此命令在生产模式下构建应用程序，但可以通过编辑 run.js 入口点轻松将此行为修改为开发模式 - 只需找到行 case 'build': 并将以下行从 await build(merge(baseConfig, prodConfig)) 替换为 await build(merge(baseConfig, devConfig))。或者可以附加用于在开发模式下构建应用程序的附加脚本，例如 yarn build-dev - 可能的脚本数量是无限的。

然后只需运行命令yarn build 并启动调试器，并将入口点指向${workspaceFolder}/dist/common/local-entry/local-entry.js。如果源映射构建正确，断点应该可以正常工作。

【讨论】：