我现在有一个项目是这样的,前端是用 React 写的,后端是用 Nodejs,目录结构如下:

1 .
2 ├── README.md
3 ├── backend
4 ├── node_modules
5 ├── package.json
6 ├── public
7 ├── src
8 └── yarn.lock

这个 package.json 的内容如下:

 1 {
 2   "name": "crudtest",
 3   "version": "0.1.0",
 4   "private": true,
 5   "dependencies": {
 6     "classnames": "^2.2.5",
 7     "concurrently": "^3.5.1",
 8     "react": "^16.2.0",
 9     "react-dom": "^16.2.0",
10     "react-redux": "^5.0.7",
11     "react-router-dom": "^4.2.2",
12     "react-scripts": "1.1.1",
13     "redux": "^3.7.2",
14     "redux-thunk": "^2.2.0"
15   },
16   "scripts": {
17     "start": "react-scripts start",
18     "build": "react-scripts build",
19     "test": "react-scripts test --env=jsdom",
20     "eject": "react-scripts eject",
21   },
22   "devDependencies": {
23     "redux-devtools-extension": "^2.13.2"
24   },
25   "proxy": "http://localhost:8080"
26 }

而后端项目是放在 backend 这个目录中,其目录结构如下:

1 backend
2 ├── etc
3 ├── node_modules
4 ├── package-lock.json
5 ├── package.json
6 └── server.js

它的 package.json 文件,内容如下:

 1 {
 2   "name": "backend",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "server.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "nodemon --exec babel-node -- ./server.js"
 9   },
10   "keywords": [],
11   "author": "",
12   "license": "ISC",
13   "dependencies": {
14     "body-parser": "^1.18.2",
15     "express": "^4.16.2",
16     "mongodb": "^3.0.4"
17   },
18   "devDependencies": {
19     "babel-cli": "^6.26.0",
20     "babel-preset-es2015": "^6.24.1",
21     "nodemon": "^1.17.1"
22   }
23 }

现在前端项目要运行起来简单,只要运行如下命令即可。

$ npm run start

就会跑 3000 端口。

那么要运行服务器的程序的话,可能要这样:

1 $ cd backend
2 $ npm run start

就会跑 8080 端口。

那么有没有一种方法同时运行两个服务呢?

就是用一条命令跑两个服务。

解决方法如下:

1、在项目根目录下,运行:

1 $ npm i concurrently --save
2 或
3 $ yarn add concurrently

  1. 然后更改 package.json 文件,如下:
 1 {
 2   "name": "crudtest",
 3   "version": "0.1.0",
 4   "private": true,
 5   "dependencies": {
 6     "classnames": "^2.2.5",
 7     "concurrently": "^3.5.1",
 8     "react": "^16.2.0",
 9     "react-dom": "^16.2.0",
10     "react-redux": "^5.0.7",
11     "react-router-dom": "^4.2.2",
12     "react-scripts": "1.1.1",
13     "redux": "^3.7.2",
14     "redux-thunk": "^2.2.0"
15   },
16   "scripts": {
17     "start": "react-scripts start",
18     "build": "react-scripts build",
19     "test": "react-scripts test --env=jsdom",
20     "eject": "react-scripts eject",
21     "server": "npm start --prefix backend",
22     "dev": "concurrently \"npm run server\" \"npm run start\""
23   },
24   "devDependencies": {
25     "redux-devtools-extension": "^2.13.2"
26   },
27   "proxy": "http://localhost:8080"
28 }

主要添加了下面这两行:

1 "server": "npm start --prefix backend",
2 "dev": "concurrently \"npm run server\" \"npm run start\""

有了 --prefix backend 就不用 cd backend 了,也就是说运行 npm run server 就会跑后端的服务,相当于:

1 $ cd backend
2 $ npm run start

最后运行 npm run dev 相当于同时运行下面两条命令:

1 $ npm run server
2 $ npm run start

界面如下:

原文访问

转载于:https://www.cnblogs.com/joyco773/p/11403804.html

使用 concurrently 并行地运行多个命令(同时跑前端和后端的服务)相关推荐

  1. 关于并行SSH运行命令和文件复制的一些总结

    由于工作中要操作几十台机器,因此研究了一下如何同时对一组机器进行操作 我个人平时喜欢用xshell,因为可以开多个窗口同时发送命令,但是这也仅限于2-5台的时候,再多就不行了.另外前人留下了一些脚本, ...

  2. npm-run-all 同时运行多条命令

    Npm-run-all ,这个工具是为了解决官方的 npm run 命令无法同时运行多个脚本的问题,它可以把诸如 npm run clean && npm run build:css ...

  3. 计算机程序配置不正确 请联系我们,Win7提示应用程序并行配置不正确使用命令行sxstrace.exe怎么解决?...

    最近有Win7用户反映,运行QQ的时候,出现提示"应用程序无法启动,因为应用程序的并行配置不正确.请参阅应用程序事件日志,或使用命令行sxstrace.exe工具".用户不知道这是 ...

  4. linux 后台运行jar包命令,Linux 运行jar包命令(Cent OS 7后台运行jar包)

    Linux 运行jar包命令如下: 方式一 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 java -jar shareniu. ...

  5. webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别

    原文地址:webpack源码阅读--npm脚本执行webpack与命令行输入webpack执行的区别 如有错误,欢迎指正! webpack是目前被大家广为使用的模块打包器.从命令行输入webpack或 ...

  6. Windows下运行rabbitmqctl 相关命令(如rabbitmqctl stop)报错:Error: unable to perform an operation on node解决方案

    Windows下运行rabbitmqctl 相关命令(如rabbitmqctl stop)报错:Error: unable to perform an operation on node解决方案 参考 ...

  7. linux 系统运行状况 shell命令 watch 监控进程是否存在

       1.  Linux的实时监测命令(watch):     watch 是一个非常实用的命令,可以帮你实时监测一个命令的运行结果,省得一遍又一遍的手动运行.该命令最为常用的两个选项是-d和-n,其 ...

  8. 【Flutter】Flutter 应用创建运行 ( Android Studio 创建 / 运行 Flutter 应用 | 命令行创建 / 运行 Flutter 应用 )

    文章目录 一.Android Studio 中创建 Flutter 应用 二. Android Studio 中运行 Flutter 应用 三. 命令行 中创建 Flutter 应用 四.命令行 中运 ...

  9. 【夸QT十一】外来物品:通用脚本帮助Web运行基础Linux命令

    需求分析: 需要注意的是在这里第一次,这个人是不是QT系列文章,它是关于Web的,之所以写这篇文章.这是因为碍着Web相关开发时间,而且往往涉及linux与底层指令处理.例如,创建一个文件夹,删除一个 ...

  10. 用系统某一用户的的身份运行某一命令

    1.在控制台中以某个用户的身份运行一条命令可以用  su -c "command" user  转载于:https://blog.51cto.com/10718348/171114 ...

最新文章

  1. 人工智能项目的六投三不投
  2. [ARM-assembly]-全局变量/静态全局变量/初始化/未初始化变量的存放位置分析
  3. 如何修改SAP登录界面的文字
  4. CUDA从入门到精通(三):必备资料
  5. 汇编访问计算机端口,汇编总结(2):中断、端口、直接定址表
  6. cocos2d-x初探学习笔记(10)--运动中的加速度效果
  7. PostgreSQL 数组类型
  8. redis位图法统计活跃用户+统计3天的连续登录用户案例
  9. python学习 day6 (3月7日)
  10. linux安装之后缺少命令,Centos 7 最小安装后关键命令找不到 ifconfig等
  11. docker springboot读取配置文件_Docker从入门到掉坑(三):容器太多,操作好麻烦
  12. python Multiprocessing Pool 应用
  13. 关于使用Tomcat服务器出现413错误的解决办法(Request Entity Too Large)
  14. 一个批量转换文件编码的python脚本
  15. Android TextInputLayout 实现动画登录界面
  16. java实现求数组中元素第二大的元素
  17. RabbitMQ快速入门python教程
  18. 201711671132《java实用教程》第一章学习总结
  19. 千月影视APP前端搭建_②_创建APP应用
  20. c语言求函数的极限例题,第二讲--函数的极限典型例题.doc

热门文章

  1. 备份数据 宝塔linux_华为云服务器安装宝塔Linux面板及宝塔面板数据库备份导入体验...
  2. 拓端tecdat|R语言蒙特卡洛计算和快速傅立叶变换计算矩生成函数
  3. c语言寻找文件指令,c语言实现文件查找
  4. Pytorch中变量在tensor与numpy之间转换,tensor在CPU和GPU之间转换
  5. F1-Score相关概念
  6. 基于Python的《庆余年》评论分析
  7. 使用visio画数据库模型图
  8. Java滑动窗口实现当前窗口内最大值输出
  9. 华翼宽带android客户端,太凶残了:电信推华翼宽带专门防蹭网
  10. 单独学java_自学Java的几大误区是什么