monorepo是一种软件开发实践,它允许多个项目或包共享一个版本控制系统仓库。这种方式可以提高代码复用性,简化依赖管理,提高开发效率。那么前端如何管理单仓多个项目呢?比如如何管理项目之间各自的依赖包,项目A如何引用项目B等等。pnpm workspace可以帮我们解决这个问题。

本文不介绍单仓和多仓的优缺点,不懂的可以自行查阅相关资料。接下来看下pnpm的workspace是如何使用的?

FLow repo repo apps apps repo->apps pkgs pkgs repo->pkgs app1 app1 apps->app1 app2 app2 apps->app2 lib1 lib1 pkgs->lib1 lib2 lib2 pkgs->lib2

pnpm workspace

pnpm只需要在根目录新建一个 pnpm-workspace.yaml 的文件,同时声明 packages 属性即可。

比如我们有目录如下:

monorepo-example/
├─ apps/
    ├─ pc
        ├─ package.json
    ├─ mobile
        ├─ package.json
├─ packages/
    ├─ components
        ├─ package.json
    ├─ utils
        ├─ package.json
├─ package.json
└─ pnpm-workspace.yaml

我们只需要通过下面的定义pnpm就可以识别为一个工作空间。

packages:
  - "packages/*"
  - "apps/*"

查看工作空间结构

可以通过下面命令输出json结构

pnpm m ls --depth -1 --json

常用命令

通常我们只需要针对其中的某个项目进行开发,我们只需要通过 --filter-F 来指定想要的目录即可。--filter 后面跟的是对应项目 package.json 里面的 name 属性,需要确保 name 唯一

# 语法
pnpm --filter <workspace> <command>
pnpm -F <workspace> <command> # -F是简写
# 例子
pnpm --filter math-lib add lodash
pnpm --filter math-lib add -D typescript @types/lodash
pnpm --filter calculator run test
# 支持glob正则匹配
pnpm --filter pkg* run test

添加本地依赖

可以通过 --workspace 标记来实现,例如

pnpm --filter components add utils --workspace