“react-scripts start”之后的顺序 NPM 脚本
Posted
技术标签:
【中文标题】“react-scripts start”之后的顺序 NPM 脚本【英文标题】:Sequential NPM script after "react-scripts start" 【发布时间】: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
。
这不是成败。两个终端选项工作正常,只是不知道这是否可能。
【问题讨论】:
【参考方案1】:是的,这是可能的,我在我的项目中使用 concurrently
来做这件事
npm i concurrently
并添加一个新脚本,例如,我们将其命名为 dev
,然后在您的脚本中:
"dev": "concurrently \"npm run start\" \"npm run start-electron\""
现在剩下要做的就是npm run dev
【讨论】:
越来越近了!看起来这是同时运行的,因为我马上得到一个电子窗口,但是开发服务器还没有启动,所以它是一个空白屏幕。一旦开发服务器启动,我就可以刷新,这没什么大不了的。也就是说,是否可以强制第二个脚本等待第一个脚本完成? 我会去刷新/做任何你需要做的事情,但如果你真的想要你可以通过同时结合等待来实现它,看看这里:***.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
【讨论】:
以上是关于“react-scripts start”之后的顺序 NPM 脚本的主要内容,如果未能解决你的问题,请参考以下文章