You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在单个GitHub仓库中创建含React.js前端与Nest.js后端的Monorepo?

如何在单个GitHub仓库中搭建包含React前端与Nest.js后端的Monorepo

当然可以,而且有几种成熟的方案可选,完全不需要局限于单纯的包管理场景:

方案1:使用npm/Yarn Workspaces(原生无额外依赖)

这是最轻量化的方案,适合中小型项目,利用包管理器原生的工作区功能来管理多项目:

  • 初始化仓库:
    mkdir my-monorepo && cd my-monorepo && git init
    
  • 根目录创建package.json,配置工作区:
    {
      "name": "my-monorepo",
      "private": true,
      "workspaces": ["packages/*"]
    }
    
  • 创建项目目录并初始化React和Nest项目:
    mkdir -p packages/frontend && cd packages/frontend && npx create-react-app .
    cd ../backend && npx @nestjs/cli new . --skip-git
    
  • 依赖管理:在根目录执行npm install或yarn install即可统一安装所有项目依赖;给单个项目加包用npm install axios --workspace frontend或yarn workspace frontend add axios
  • 统一脚本:在根package.json里配置快捷命令,比如:
    "scripts": {
      "start:frontend": "npm run start --workspace frontend",
      "start:backend": "npm run start:dev --workspace backend",
      "build:all": "npm run build --workspace frontend && npm run build --workspace backend"
    }
    

方案2:使用TurboRepo(适合中大型项目)

TurboRepo是Vercel推出的Monorepo工具,自带任务缓存、依赖编排、并行执行等能力,能大幅提升多项目的构建效率:

  • 初始化TurboRepo项目:
    npx create-turbo@latest
    
    选择空白模板后,手动创建apps/frontend(React项目)和apps/backend(Nest项目)
  • 目录结构示例:
    my-monorepo/
      apps/
        frontend/
        backend/
      packages/ # 可选,存放共享类型、工具函数等公共包
      turbo.json
      package.json
    
  • 配置turbo.json定义任务规则:
    {
      "$schema": "https://turbo.build/schema.json",
      "tasks": {
        "build": {
          "dependsOn": ["^build"],
          "outputs": ["dist/**", "build/**"]
        },
        "dev": {
          "cache": false
        }
      }
    }
    
  • 根目录脚本配置:
    "scripts": {
      "dev": "turbo run dev", // 并行启动前后端开发服务
      "build": "turbo run build" // 按依赖顺序构建所有项目
    }
    

方案3:Lerna(兼容应用项目,可结合Workspaces)

你之前觉得Lerna只适用于包是误解,它完全可以管理应用类项目,配合npm/Yarn Workspaces使用体验更好:

  • 初始化Lerna:
    npx lerna init
    
  • 根package.json中配置workspaces,和方案1一致,Lerna会自动识别packages/下的项目
  • 管理命令示例:
    • 给前端项目加包:lerna add axios --scope frontend
    • 启动后端服务:lerna run start:dev --scope backend
    • 批量构建所有项目:lerna run build

方案选择建议

  • 小型项目:优先选npm/Yarn Workspaces,无额外学习成本,足够好用
  • 中大型项目:选TurboRepo,缓存和任务编排能显著提升开发效率
  • 熟悉Lerna生态:可以用Lerna+Workspaces的组合,兼顾命令行体验和原生依赖管理

内容的提问来源于stack exchange,提问作者goscamp

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 12:52:45