“react-scripts start”之后的顺序 NPM 脚本答案

【问题标题】：Sequential NPM script after "react-scripts start"“react-scripts start”之后的顺序 NPM 脚本
【发布时间】：2020-11-21 08:37:36
【问题描述】：

使用 React 开发 Electron 应用。现在，为了开始工作，我运行典型的 npm start 命令，该命令运行 react-scripts start 脚本。

这将启动开发服务器。开发服务器启动后，我打开第二个终端窗口并运行脚本来启动电子 npm run start-electron，这将在 Electron 窗口中打开我的 React 应用程序。

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

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

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

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

【问题讨论】：

标签： reactjs electron package.json npm-scripts

【解决方案1】：

是的，这是可能的，我在我的项目中使用 concurrently 来做这件事

npm i concurrently

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

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

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

【讨论】：

越来越近了！看起来这是同时运行的，因为我马上得到一个电子窗口，但是开发服务器还没有启动，所以它是一个空白屏幕。一旦开发服务器启动，我就可以刷新，这没什么大不了的。也就是说，是否可以强制第二个脚本等待第一个脚本完成？
我会去刷新/做任何你需要做的事情，但如果你真的想要你可以通过同时结合等待来实现它，看看这里：stackoverflow.com/a/48192578跨度>
是的。刚刚尝试合并并等待，现在我不需要刷新。在我的本地开发服务器启动之前，电子脚本不会运行

【解决方案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

【讨论】：

不幸的是，我尝试了顺序运行技术，它们只执行前半部分。我想可能与“react-scripts start”有关。

【解决方案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。

正如@Slim 所说，另一种选择可能是concurrently 与wait-on 结合

来自文档：

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

【讨论】：

【解决方案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"
  }

【讨论】：

【解决方案5】：

我用concurrently解决了这个问题

npm i concurrently

在我的 package.json 中

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

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

【讨论】：