"react-scripts start" 之后的顺序 NPM 脚本

Question

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

这将启动开发服务器。开发服务器启动后，我打开第二个终端 window 和运行一个脚本来启动电子 npm run start-electron，它在电子 window.[=15 中打开我的 React 应用程序=]

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

启动开发服务器
等待开发服务器启动
然后启动electron

我尝试在 package.json 中设置顺序脚本，但它只会启动开发服务器。例如 npm run start && 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 模块。它有不同的用途，但它可能适用于您的场景。

来自文档：

This command is meant to be used with NPM script commands. If you have a "start server", and "test" script names for example, you can start the server, wait for a url to respond, then run tests. When the test process exits, the server is shut down.
    "scripts": {
        "start-server": "npm start",
        "test": "mocha e2e-spec.js",
        "ci": "start-server-and-test start-server http://localhost:8080 test"
        } 
    } 
To execute all tests simply run npm run ci.

另一种选择可能是 concurrently combined with wait-on 正如@Slim 所说

来自文档：

wait-on will wait for period of time for a file to stop growing before triggering availability which is good for monitoring files that are being built. Likewise wait-on will wait for period of time for other resources to remain available before triggering success.

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

"react-scripts start" 之后的顺序 NPM 脚本

Sequential NPM script after "react-scripts start"

reactjs

electron

package.json

npm-scripts