Question

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

要使我的应用程序正常运行，必须在终端窗口中运行电子外壳，然后在另一个选项卡中，运行发出一些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可以运行，但是需要重新加载应用程序。

同时，我需要使用npm run start启动应用程序，然后按Command + R / Ctrl + R在应用程序窗口上获取react内容。

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

Answer 1

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

首先，您可以执行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作为开发依赖项。