如何使用 pnpm 实现前端 Monorepo项目管理

前言

随着软件开发项目变得越来越庞大和复杂,如何有效管理和维护代码库成为了一个重要的问题。一种流行的解决方案是 Monorepo,也就是在一个版本控制系统中管理所有的项目代码。

什么是 Monorepo

Monorepo 是一种项目代码管理方式,指单个仓库中管理多个项目,有助于简化代码共享、版本控制、构建和部署等方面的复杂性,并提供更好的可重用性和协作性。
React项目便是基于monrepo方式管理
react monorepo

什么是 Pnpm

pnpm 是一款快速、高效的 Javascript 包管理器。它的核心特点包括节省磁盘空间和更强的安全性。更重要的是,pnpm 支持 workspaces 功能,这使得它成为管理 monorepo 的工具选择。

配置步骤

1. 创建项目文件夹并且创建配置文件**pnpm-workspace.yaml**

在项目根目录下,创建一个名为 pnpm-workspace.yaml 的文件。这个文件可以帮助 pnpm 识别仓库的位置。

我们可以在 packages 设置中,指定哪些文件夹下的包是 workspace 的一部分

packages:
  - "apps/octopus-app-client"
  - "apps/octopus-console"

或者避免每个项目都要单独添加,可通过通配符的形式配置 workspace

packages:
 - 'apps/*'

2. 创建应用项目

monorepo 管理只是一种项目管理方式,最终有价值的部分还是我们的业务应用;例如我们可以将Web项目、NodeJS项目、组件库Lib项目等等相关的工程全部收敛到 apps目录下。

Untitled.png

3. 安装依赖

我们在项目根目录下运行 pnpm install。这一步会安装我们的所有包之间的依赖关系。

Untitled.png

4. 应用启动

执行完项目依赖安装后,各自应用都可以按照单独仓库的运行开发方式开发调试了。至此,我们实现了最简单的monorepo管理,也就是把多个应用项目放到了同一个大文件夹下管理,项目依赖统一管理,git版本统一管理,对于开发者而言,它就是一个整体。

但是,有时候我们还需要一些进阶的玩法,比如如何在业务项目中依赖 monorepo 中的组件库项目?如何在项目根路径运行应用的脚本?

进阶

1. 添加依赖包

如果你有一个 package 依赖于另一个 package,你可以使用 pnpm add 添加这个依赖。

例如,在 apps/app-web文件夹下运行 pnpm add @common/components@common/component 就会被添加到 app-web 的**package.json** 文件中。

Untitled.png

2. 运行所有项目的脚本

如果启动项目需要运行所有应用项目的 start脚本,一种比较笨的方式是在每个项目的路径下运行启动脚本,pnpm也提供了一种便捷的方式。

使用 pnpm recursive 命令在所有包中运行特定脚本。例如,**pnpm recursive s**tart 命令将会所有包中运行 start 脚本。

总结

monorepo 是大型项目的常用的管理方式,虽然它也有不少缺点,比如代码仓库过大、权限不好管理、构建部署消耗资源等等,但是它也解决了不少大型项目的痛点,比如代码复用、多项目协同开发、依赖管理等问题。

pnpm 是前端项目最常用的依赖管理工具,并且它还提供了**workspace**管理的能力,那么基于pnpm来管理monorepo项目是一种不错的解决方案。

最近更新

  1. TCP协议是安全的吗?

    2023-12-26 08:18:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-26 08:18:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-26 08:18:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-26 08:18:02       18 阅读

热门阅读

  1. 如何在uni-app中进行状态管理的?

    2023-12-26 08:18:02       40 阅读
  2. Django

    Django

    2023-12-26 08:18:02      33 阅读
  3. 数据分析思维

    2023-12-26 08:18:02       48 阅读
  4. spring基于xml的bean管理总结

    2023-12-26 08:18:02       45 阅读
  5. 用手机做无人直播怎么做?

    2023-12-26 08:18:02       37 阅读
  6. React中使用WebRTC

    2023-12-26 08:18:02       40 阅读
  7. $(sort $(patsubst $(SRCDIR)/%,%,$(wildcard $(SRCDIR)/crc/*.c))

    2023-12-26 08:18:02       28 阅读
  8. SparkCore

    SparkCore

    2023-12-26 08:18:02      26 阅读
  9. python 图像处理ORB算法

    2023-12-26 08:18:02       45 阅读
  10. flutter项目从创建到运行,以及一些常用的命令

    2023-12-26 08:18:02       35 阅读
  11. [HADOOP]数据倾斜的避免和处理

    2023-12-26 08:18:02       40 阅读
  12. Hadoop——分布式计算

    2023-12-26 08:18:02       27 阅读
  13. 支持向量机(SVM)

    2023-12-26 08:18:02       29 阅读