我如何运行电子反应应用程序正确？

Question

我有一个电子应用程序，UI 是使用 react.js 创建的。

为了让我的应用程序正常工作，我必须在终端 window 中运行电子 shell，在另一个选项卡中，我运行 webpack-dev -发出一些js代码的服务器。

这是我需要做的完整设置，以便我的应用程序正常工作。

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

我尝试了以下方法：

我在 package.json 中加入了 "concurrently": "^4.1.2" 并重写了脚本部分，使其看起来像：

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

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

同时，我需要使用 npm run start 启动应用程序，然后按 command + R / Ctrl + R 以获取应用程序上的反应内容 window。

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

Answer 1

实际上问题出在 start cmd 上，因为它在 start:dev 完成之前执行 electron 由于电子应用程序在 webpack-dev-server 编译反应应用程序之前启动。

首先可以执行start:devcmd，等到webpack-dev-server编译完react app后再执行electroncmd。

你可以使用这个cmd

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

这里需要添加wait-on和concurrently作为开发依赖。

How do I run an electron react application correctly?