如何在现有React JS应用中为各功能模块配置多个独立repo

前置准备 #

• 先拉取原单仓库develop分支的最新代码到本地，打备份标签防止拆分失败回滚，执行命令：
  git tag -a mono-repo-split-backup -m "多仓库拆分前全量备份"
  推送到远程后即可作为兜底回滚版本。
• 梳理代码依赖关系：提前分离三个业务模块共用的基础组件、请求封装、工具函数、全局配置等公共逻辑，这部分代码需要单独拆为公共依赖仓库，避免后续多仓库重复维护。
• 提前约定各模块的路由前缀、对外暴露的方法规范，避免后续集成时出现冲突。

模块拆分步骤（每个功能模块都执行一次） #

以学生模块为例：

1. 本地进入原单仓库目录，使用git filter-repo工具过滤出仅和学生模块相关的提交记录（保留提交历史，不需要手动复制代码），命令示例如下，路径替换为你项目中对应模块的实际路径：
   git filter-repo --path src/pages/student --path src/components/student --path src/api/student
2. 新建对应功能的远程空仓库，将过滤后的本地代码关联到新远程仓库并推送：

   git remote add origin [你的学生模块远程仓库地址]
   git push -u origin main
   

3. 重复上述操作，分别完成教师模块、学校模块、公共依赖模块的独立仓库拆分。
4. 单独创建主框架仓库，仅保留项目的入口文件、全局路由配置、基础布局、全局样式等不涉及业务逻辑的通用代码。

多仓库协同配置方案 #

根据团队开发习惯二选一即可：

方案1：私有npm包管理 #

适合公共依赖迭代频率不高、各业务模块独立部署的场景

• 将公共依赖仓库的代码打包发布到公司内部私有npm源
• 三个业务模块仓库分别安装公共依赖，执行命令：npm install @your-team/common-kit（包名替换为你发布的私有包名）
• 每个业务仓库独立配置CI/CD流程，独立打包、独立发布，互不影响
• 公共依赖更新后发布新版本，各业务仓库按需升级对应版本即可

方案2：Git子模块管理 #

适合需要同时调试公共依赖和业务代码、迭代频率较高的场景

• 在主框架仓库中添加所有子仓库为git子模块，命令示例：

  git submodule add [公共依赖仓库地址] src/common
  git submodule add [学生模块仓库地址] src/pages/student
  git submodule add [教师模块仓库地址] src/pages/teacher
  git submodule add [学校模块仓库地址] src/pages/school
  

• 首次拉取主框架仓库的开发者需要执行子模块初始化命令：
  git submodule update --init --recursive
• 子模块有代码更新时，在主框架仓库执行git submodule update --remote即可拉取所有子模块的最新代码

后续收尾 #

• 所有拆分和集成测试完成后，将原单仓库设置为只读归档状态，通知团队成员不再向旧仓库提交代码
• 为每个独立仓库配置对应开发人员的读写权限，避免越权修改

内容的提问来源于stack exchange，提问作者Chetan