前端开发提效神器：`concurrently` 实战指南

关键词 ：concurrently、npm scripts、前端工程化、开发效率、Node.js、package.json、多命令并行

在现代前端项目中，我们常常需要同时运行多个开发服务，比如：

启动 React/Vue 开发服务器
监听并编译 TypeScript 或 Sass
运行 Mock API 服务
实时构建文档或 Storybook

如果每次都要打开多个终端窗口手动执行命令，不仅繁琐，还容易出错。有没有一种方式，一条命令启动整个开发环境？

答案就是：concurrently。

🌟 什么是 `concurrently`？

concurrently 是一个轻量级的 Node.js 工具，允许你在 单个命令中并行运行多个子命令，并统一管理它们的输出、颜色、日志和退出行为。

它特别适合用于：

前端开发环境一键启动
构建流程中并行执行多个任务
微前端或多服务项目集成

🔧 安装 `concurrently`

bash 复制代码

npm install --save-dev concurrently
# 或
yarn add -D concurrently
# 或
pnpm add -D concurrently

安装后，你就可以在 package.json 的 scripts 中使用它了。

🧩 基本用法：并行运行多个命令

假设你的项目结构如下：

json 复制代码

{
  "scripts": {
    "start": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
    "dev:client": "vite",
    "dev:server": "nodemon server.js"
  }
}

执行：

bash 复制代码

npm start

你会看到两个进程同时启动 ，输出被 concurrently 染色区分，便于调试：

csharp 复制代码

[dev:client] vite v4.0.0 dev server running at:
[dev:client] ➜ Local: http://localhost:3000/
[dev:server] [nodemon] starting `node server.js`
[dev:server] Server running on http://localhost:5000

✅ 两个服务同时运行，共享一个终端窗口，开发体验大幅提升！

🎨 高级配置：自定义输出样式

concurrently 支持丰富的配置选项，可以通过命令行参数或配置文件进行设置。

1. 自定义前缀和颜色

json 复制代码

"scripts": {
  "dev": "concurrently --names \"CLIENT,SER\" -c \"blue.bold,cyan.bold\" \"vite\" \"nodemon server.js\""
}

--names：为每个进程设置别名
-c：设置输出颜色（支持 CSS 风格颜色名）

2. 隐藏标题栏（简洁模式）

bash 复制代码

concurrently --hide kill-signals \"npm run build\" \"npm run lint\"

3. 设置重启策略

bash 复制代码

concurrently --restart-tries 3 \"npm run dev:client\" \"npm run dev:server\"

当某个进程崩溃时，自动重试 3 次。

🛠️ 实战场景：前端 + Mock API 一体化开发

很多项目使用本地 Mock 数据进行开发。我们可以用 concurrently 一键启动前端和 Mock 服务。

json 复制代码

{
  "scripts": {
    "dev": "concurrently \"vite\" \"json-server --watch mock/db.json --port 3001\"",
    "dev:quiet": "concurrently --silent \"vite\" \"json-server --watch mock/db.json\""
  }
}

现在只需运行：

bash 复制代码

npm run dev

前端运行在 http://localhost:3000
Mock API 运行在 http://localhost:3001

前端代码中请求 /api/users，即可获取 Mock 数据，完全无需后端介入。

🧱 微前端/多项目集成

在微前端架构中，主应用和子应用可能分布在不同目录。concurrently 可以统一启动：

json 复制代码

{
  "scripts": {
    "start:all": "concurrently \"npm run start:shell\" \"npm run start:user\" \"npm run start:order\""
  },
  "scripts:shell": "cd shell && vite",
  "scripts:user": "cd user-module && vite",
  "scripts:order": "cd order-module && vite"
}

一条命令，启动整个微前端体系！

⚠️ 注意事项与最佳实践

问题	解决方案
子进程未正确退出	使用 `--kill-others-on-fail`，任一进程失败时终止其他进程
输出混乱	使用 `--names` 和颜色区分，提升可读性
Windows 路径问题	使用双引号 `\"` 包裹命令，避免解析错误
内存占用高	避免并行运行过多重型服务，合理拆分脚本

📦 配置文件（可选）

除了命令行，你还可以创建 concurrently.config.cjs 进行更复杂配置：

js 复制代码

// concurrently.config.cjs
module.exports = {
  commands: ['vite', 'json-server mock/db.json'],
  options: {
    restartTries: 3,
    killOthers: ['failure'],
    prefixes: ['blue', 'green'],
    names: ['Frontend', 'Mock API']
  }
};

然后运行：

bash 复制代码

npx concurrently --config concurrently.config.cjs

🔄 对比其他工具

工具	特点	适用场景
`concurrently`	轻量、易用、支持染色	前端项目首选
`npm-run-all`	支持串行/并行	复杂脚本编排
`nx` / `turbo`	全功能 Monorepo 工具	大型项目
`docker-compose`	容器化并行	生产环境部署

✅ 对于大多数前端项目，concurrently 是最简单高效的解决方案。

✅ 总结

concurrently 虽小，但极大提升了前端开发的自动化与集成度。通过它，你可以：

✅ 一键启动多个服务
✅ 统一管理开发环境
✅ 提升团队协作效率
✅ 简化 CI/CD 脚本

📚 参考链接

💡 小贴士 ：下次当你需要"开多个终端"的时候，先想想：能不能用 concurrently 一条命令解决？

欢迎在评论区分享你的 concurrently 使用技巧！👇

前端开发提效神器：`concurrently` 实战指南

🌟 什么是 concurrently？

🔧 安装 concurrently

🧩 基本用法：并行运行多个命令

🎨 高级配置：自定义输出样式

1. 自定义前缀和颜色

2. 隐藏标题栏（简洁模式）

3. 设置重启策略

🛠️ 实战场景：前端 + Mock API 一体化开发

🧱 微前端/多项目集成

⚠️ 注意事项与最佳实践

推荐组合配置：

📦 配置文件（可选）

🔄 对比其他工具

✅ 总结

📚 参考链接

🌟 什么是 `concurrently`？

🔧 安装 `concurrently`