一分钟入门 Monorepo,确定不看看吗?

为什么 MultiRepo 有局限性

在软件开发过程中,采用 MultiRepo(一个项目一个仓库)的方式存在一些不足之处:

  1. 代码复用问题

    • 多个项目需要复制和维护相同的代码,增加了工作量和风险。
    • 如果将代码抽取为 npm 包,重新发布和安装的步骤繁琐。
    • 多个项目依赖的工具包更新不一致,导致版本管理困难。
  2. 基建和部署繁琐

    • 需要为每个项目建立独立的基础设施、构建流程、部署流程和发布流程,增加了管理和维护成本。

Monorepo 的优势

Monorepo 是将多个项目放置在一个仓库中的方式,具有以下优势:

  1. 代码复用和管理

    • 代码改动可以同步到所有项目,便于代码复用和统一管理。
    • 统一更新代码库可能导致项目 bug,但也提升了对代码的维护和管理效率。
  2. 共享基础设施

    • 可以共享同一套基础设施,简化构建流程,减少重复工作,提高开发效率。

搭建 Monorepo 步骤

初始化项目

在根目录下创建 package.json 文件,并在 packages 目录下放置各个子项目仓库。

以下是一个简单的 Monorepo 项目结构示例:

go 复制代码
my-monorepo/
├── package. json
├── pnpm-workspace. yaml
└── packages/
    ├── project1/
    │   ├── package. json
    │   ├── src/
    │   └── ...
    ├── project2/
    │   ├── package. json
    │   ├── src/
    │   └── ...
    └── shared-utils/
        ├── package. json
        ├── src/
        └── ...

在这个示例中:

  1. my-monorepo/ 是根目录,包含了主要的项目配置文件。
  2. package. json 是根目录下的配置文件,用于定义整个 Monorepo 项目的依赖和脚本。
  3. pnpm-workspace. yaml 文件定义了哪些目录下的包被视为 workspace 中的一部分。
  4. packages/ 目录是存放各个子项目仓库的文件夹。
  5. project1/ 和 project2/ 是两个独立的项目,每个项目都有自己的 package. json 文件和代码目录。
  6. utils/ 是一个存放共享工具库的项目,其他项目可以依赖这个工具库进行代码复用。

创建 pnpm-workspace.yaml 文件

yaml 复制代码
packages:
  - 'packages/**'

这个文件定义了哪些目录下的包被视为 workspace 中的一部分。

子项目的配置

  • 切换到子项目进行初始化和下载依赖。
  • 或者使用 pnpm -f <package_selector> <command> 命令。
shell 复制代码
# 添加第三方包
pnpm -f @packages/components add lodash
# 添加内部包
pnpm -filter @packages/components add @packages/utils@*

对应子项目的 package.json 会生成配置如下:

json 复制代码
{
  "dependencies": {
    "lodash": "^4.17.21",
    "@packages/utils": "workspace:*"
  }
}

参考

相关推荐
GuWenyue3 小时前
放弃云端API!一套React+WebGPU本地LLM方案,零数据上传、离线可用
前端·人工智能·前端框架
原则猫5 小时前
函数/变量提升
前端
独泪了无痕5 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee7 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
卖买买卖7 小时前
美业收银系统对比分析:系统架构、功能深度与服务模型评估
架构·sass
用户059540174467 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹7 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen7 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱7 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
wdfk_prog8 小时前
嵌入式面试真题第 15 题:不可恢复异常后的通用崩溃快照、调用栈保存与离线分析架构
linux·开发语言·面试·架构