Question

使用React开发电子应用程序。现在，为了开始工作，我运行了一个典型的userAgent命令，该命令运行了npm start脚本。

这将启动开发服务器。开发服务器启动后，我将打开第二个终端窗口并运行脚本以启动电子react-scripts start，这将在电子窗口中打开我的React应用。

这可以按预期工作，但是我很好奇是否存在一种创建脚本的方法：

启动开发服务器
等待开发服务器启动
然后开始电子

我尝试在package.json中设置顺序脚本，但它仅启动开发服务器。例如npm run start-electron。

这不是成败。两个终端的选项工作正常，只是不知道是否可行。

Answer 1

是的，我可以在项目中使用concurrently来完成

npm i concurrently

并添加一个新脚本，例如，将其命名为dev，然后在您的脚本中：

"dev": "concurrently \"npm run start\" \"npm run start-electron\""

现在剩下要做的就是npm run dev

Answer 2

您可以在根目录中以扩展名.sh创建脚本它可能包含您的所有操作

  npm start
  npm run start-electron

您可以在package.json

中创建自定义脚本的第二种方法

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "customStart":"npm run start && npm run start-electron"
  },

运行此脚本

npm run customStart

Answer 3

您可以尝试start-server-and-test npm模块。它有不同的用途，但可以满足您的情况。

摘自文档：

该命令旨在与NPM脚本命令一起使用。如果你有例如“启动服务器”和“测试”脚本名称，就可以启动服务器，等待URL响应，然后运行测试。当测试进程退出，服务器关闭。
    "scripts": {
        "start-server": "npm start",
        "test": "mocha e2e-spec.js",
        "ci": "start-server-and-test start-server http://localhost:8080 test"
        } 
    } 
要执行所有测试，只需运行npm run ci。

另一种选择是将concurrently与wait-on结合使用，如@Slim所说

摘自文档：

wait-on将在文件停止增长之前等待一段时间触发可用性，这对于监视文件正在建设。同样，等待会等待一段时间在触发成功之前保持可用的资源。

Answer 4

我有完全相同的情况，下面的脚本对我有用（记得安装 wait-on）

  "scripts": {
    "start-reactjs": "PORT=25610 react-scripts start",
    "start-electron": "wait-on http://localhost:25610 && electron .",
    "start": "npm run start-electron & npm run start-reactjs"
  }

Answer 5

我使用 concurrently

解决了这个问题

npm i concurrently

在我的 package.json 中

"build": "concurrently \"npm run build-react\" && npm run build-jsx",

我正在使用它通过 react 构建 Adobe 扩展，我需要在 react-scripts build 之后捆绑我的扩展脚本，否则会删除我的 .jsxbin

“反应脚本启动”后的顺序NPM脚本

5 个答案: