前端多项目一键运行脚本教程
一、背景痛点
我们项目是典型的「多子应用 monorepo 结构」，每次启动/打包都需要手动cd进对应子项目目录，执行npm run命令。
如果需要批量操作多个项目，还要反复切换目录，非常低效且容易出错。
为了解决这个问题，我们写了一个通用脚本，只需要进入npm-config目录执行命令，就能一键选择并运行任意子项目的serve/dev/build/install操作，无需手动切换目录。
二、脚本核心功能说明
- 自动发现子项目：脚本会自动遍历与
npm-config同级的所有目录，筛选出包含package.json的文件夹作为可选项（排除无关目录）。 - 支持4种常用命令：
命令 对应操作 说明 npm run serve启动项目 开发环境启动（部分项目用 dev，脚本已做兼容）npm run dev启动项目 与 serve效果一致，适配不同项目的脚本配置npm run build打包项目 生产环境构建，生成dist文件 npm run install下载依赖 安装子项目所有依赖（可批量执行） - 交互选择：执行命令后，脚本会列出所有可运行的子项目，输入序号即可选择单个/多个项目执行（多个用逗号分隔，直接回车执行全部）。
三、使用步骤（超简单！）
1. 目录结构说明
确保你的项目结构如下：
你的项目根目录/ ├── boe-h5/ # 子项目1 ├── claim-h5/ # 子项目2 ├── evs/ # 子项目3 ├── ... # 其他子项目 └── npm-config/ # 脚本所在目录（关键！） ├── package.json └── run.js # 核心脚本文件2. 操作流程
- 打开终端，进入
npm-config目录：cd你的项目根目录/npm-config - 执行对应命令，按需选择项目：
- 示例1：启动
boe-h5项目npmrun serve# 脚本会列出所有项目，输入 1（对应boe-h5的序号），回车即可启动
- 示例1：启动
``` - 示例2：打包多个项目（boe-h5和claim-h5） ```bash npm run build # 输入 1,2，回车即可批量打包两个项目 ``` - 示例3：给所有子项目安装依赖 ```bash npm run install # 直接回车，脚本会自动遍历所有项目并执行npm install ```四、脚本完整代码（可直接复制）
1.npm-config/package.json配置
{"name":"npm-config","version":"1.0.0","description":"多子项目一键运行脚本","main":"run.js","scripts":{"serve":"node run.js serve","dev":"node run.js dev","build":"node run.js build","install":"node run.js install"},"keywords":[],"author":"","license":"MIT"}2.npm-config/run.js核心脚本
已经放在文章最后的链接了
五、常见问题与优化说明
为什么脚本要放在
npm-config目录？
因为__dirname会获取脚本所在目录，通过path.resolve(__dirname, '../../')就能定位到所有子项目的根目录，无需手动配置路径，适配不同开发环境。批量执行多个项目时会冲突吗？
脚本是串行执行命令，上一个项目执行完成后才会执行下一个，避免端口占用或进程冲突。如果需要并行执行，可修改脚本使用child_process.exec异步执行。如何添加新的子项目？
直接在根目录新建项目即可，脚本会自动识别包含package.json的目录，无需修改脚本代码。
六、总结
这个脚本解决了多子项目开发中频繁切换目录的痛点，把原本需要cd进目录→执行命令的两步操作，简化为进入npm-config目录→选择项目执行命令的一步操作，同时支持批量执行，大幅提升开发效率。
如果后续需要扩展功能（比如支持npm run lint或npm run test），只需要修改package.json的scripts和run.js中的commandObj即可，非常灵活。
如果觉得帮到你了，可以给我一个小心心吗？
