北京网站设计联系电话,中国广告公司前十强,建站登录,做网站的流程分析-图灵吧使用 concurrently 实现前后端一键启动
本文适合#xff1a; 前后端分离项目#xff08;如 React Node.js#xff09;#xff0c;希望通过一条命令同时启动前端和后端服务。 工具链#xff1a; Node.js、npm、concurrently。 耗时#xff1a; 3 分钟。 文章目录 使用 c…使用 concurrently 实现前后端一键启动
本文适合 前后端分离项目如 React Node.js希望通过一条命令同时启动前端和后端服务。 工具链 Node.js、npm、concurrently。 耗时 3 分钟。 文章目录 使用 concurrently 实现前后端一键启动[toc]一、场景需求二、解决方案concurrently三、操作步骤1. 项目结构2. 初始化根目录的 package.json3. 安装 concurrently4. 配置启动脚本参数说明 5. 一键启动 四、注意事项1. 路径问题2. 端口冲突3. 依赖安装4. 终止所有进程 五、总结
一、场景需求
在开发前后端分离项目时通常需要
启动前端服务如 npm run start。启动后端服务如 npm run dev。 每次手动打开两个终端分别执行命令非常繁琐如何通过一条命令一键启动 二、解决方案concurrently
concurrently 是一个 Node.js 工具可以并行执行多个命令并合并日志输出到同一终端。 三、操作步骤
1. 项目结构
假设项目结构如下
my-project/
├── frontend/ # 前端项目如 React
├── backend/ # 后端项目如 Express
└── package.json # 根目录的 package.json需新建2. 初始化根目录的 package.json
在项目根目录my-project/执行
npm init -y3. 安装 concurrently
npm install concurrently --save-dev4. 配置启动脚本
修改根目录的 package.json添加以下内容
{scripts: {start:frontend: cd frontend(你的前端地址) npm start,start:backend: cd backend(你的后端地址) npm run dev,start: concurrently \npm run start:frontend\ \npm run start:backend\}
}参数说明
start:frontend进入前端目录并启动前端服务假设前端使用 npm start。start:backend进入后端目录并启动后端服务假设后端使用 npm run dev。start并行执行前端和后端启动命令。
5. 一键启动
在根目录执行
npm run start终端会同时输出前后端日志效果如下 四、注意事项
1. 路径问题
确保 frontend 和 backend 目录名称与你的项目实际目录一致。如果路径不同需修改脚本中的路径
start:frontend: cd your-frontend-folder npm start2. 端口冲突
若前后端服务端口冲突如都使用 3000需修改其中一个服务的端口号。
前端修改端口React在 frontend/package.json 中修改scripts: {start: set PORT3001 react-scripts start # Windows// 或start: PORT3001 react-scripts start # macOS/Linux
}3. 依赖安装
确保前后端项目已安装依赖
cd frontend npm install
cd backend npm install4. 终止所有进程
按 Ctrl C 可一次性终止所有并行进程。 五、总结
通过 concurrently我们只需一条命令即可实现前后端服务的同时启动大幅提升开发效率。此方案适用于任何需要并行执行命令的场景如多微服务项目。
完整代码示例 Gitee 链接
