reactjs - 如何正确运行 Electron react 应用程序？

Question

我有一个 Electron 应用程序，用户界面是使用react.js创建的。

为了使我的应用程序正常运行，我必须在终端窗口中运行 Electron shell ，然后在另一个选项卡中，运行发出一些js代码的webpack-dev-server。

这是我需要完成的完整设置，以使我的应用程序正常运行。

我希望能够运行一个命令并启动完整的应用程序。如何实现的？

我尝试了以下方法:

我在package.json中包含了“concurrently”:“^ 4.1.2”，并将脚本部分重写为:

"scripts": {
    "start": "npm-run-all --parallel start:dev electron",
    "start:dev": "webpack-dev-server",
    "electron": "electron ."
  }

现在，如果我运行npm start，它可以工作，但需要重新加载该应用程序。

https://github.com/snipedown21/convertVideos-electron

对于并发，我需要使用npm run start启动应用程序，然后按Command + R/Ctrl + R来获取应用程序窗口上的react内容。

预期的行为是在启动时查看内容。如何实现呢？

Answer 1

实际上，问题出在start cmd上，因为它在electron完成之前执行start:dev，这是由于在webpack-dev-server编译react应用之前启动了哪个 Electron 应用。

首先，您可以执行start:dev cmd，等到完成webpack-dev-server来编译react应用，然后再执行electron cmd。

您可以使用此cmd

 "start": "concurrently \"npm run start:dev\" \"wait-on http://localhost:4172  && npm run electron\"",

在这里，您需要添加wait-on和concurrently作为dev依赖项。