白色 window 从 VSCode 调试 Electron forge "typescript + webpack" 应用程序时 - MAIN_WINDOW_WEBPACK_ENTRY 变量未设置

Question

我使用“typescript + webpack”模板创建了一个 Electron forge 项目，如 the forge guide 中所述：

> yarn create electron-app debugging-test --template=typescript-webpack

生成的应用程序在运行 npm start 时运行良好。然后我想为此模板配置 VSCode 调试器，所以我按照 the debugging section of the forge guide 并创建了包含以下内容的 launch.json 文件：

{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
  "windows": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win.cmd"
  },
  // runtimeArgs will be passed directly to your Electron application
  "runtimeArgs": [
    "foo",
    "bar"
  ],
  "cwd": "${workspaceFolder}"
}

这对我来说真的行不通。单击 F5 后，调试器启动，但它不会在主进程中的任何断点处中断，也不会出现 window。然后我尝试了 Microsoft's vscode-recipes:

中的 launch.json

{
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Electron: Main",
              "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
              "runtimeArgs": [
                  "--remote-debugging-port=9223",
                  "."
              ],
              "windows": {
                  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
              }
          },
          {
              "name": "Electron: Renderer",
              "type": "chrome",
              "request": "attach",
              "port": 9223,
              "webRoot": "${workspaceFolder}",
              "timeout": 30000
          }
      ],
      "compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]
  }

这个，在命中 F5 后，启动 Electron window 正常，甚至主进程中的断点被命中但没有内容加载到 window。 window 是白色的。在 index.ts 中的第 21 行中断时：

mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

我看到 MAIN_WINDOW_WEBPACK_ENTRY 变量未设置，这就是为什么没有内容加载到 window。

调试“typescript + webpack”electron 的 forge 模板的正确 VSCode 设置是什么？

Answer 1

我在 Github 上找到了 this is a bug in Windows that is tracked here。解决方法是删除 fork-ts-checker-webpack-plugin。例如，在 webpack.plugins.js 中暂时从数组中删除 new ForkTsCheckerWebpackPlugin() 直到它被修复：

//const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = [/*new ForkTsCheckerWebpackPlugin()*/];

在调试主进程和渲染器之后，进程运行良好！

白色 window 从 VSCode 调试 Electron forge "typescript + webpack" 应用程序时 - MAIN_WINDOW_WEBPACK_ENTRY 变量未设置

White window when debugging Electron forge "typescript + webpack" app from VSCode - MAIN_WINDOW_WEBPACK_ENTRY variable is not being set

visual-studio-code

webpack

electron

vscode-debugger

electron-forge