[FE] pnpm monorepo

本文记录了一下用 pnpm 新建一个 monorepo 的全过程。

1. 初始化仓库

$ cd test-pnpm-monorepo
$ pnpm init -f     # 生成 package.json 文件

2. 新建 pnpm-workspace.yaml 文件

根目录下，新建 pnpm-workspace.yaml，文件内容如下，

packages:
  - 'packages/**'

表明 所有 packages/ 目录下的文件夹，被自动识别为一个 package。

3. 新建子项目

$ mkdir packages && mkdir packages/app && mkdir packages/lib # 新建 app 和 lib 两个 package
$ cd packages/app && pnpm init -f && cd ...  # 初始化 app package
$ cd packages/app && pnpm init -f && cd ...  # 初始化 lib package

以上新建了两个 package，分别为 app 和 lib，
我们还需改一下 packages/app/package.json 和 packages/lib/package.json 中的 name，
增加统一的命名空间：@test，

{
  "name": "@test/app",
  ...
}

{
  "name": "@test/lib",
  ...
}

4. 依赖的安装

（1）全局依赖

$ pnpm i typescript -D -W    # `-W` 参数

最外层 package.json，

{
  "name": "test-pnpm-monorepo",
  ...
  "devDependencies": {
    "typescript": "^4.5.4"
  }
}

（2）特定 package 增加外部依赖

$ pnpm i debug --filter @test/lib    # `--filter` 为制定 package 添加依赖

packages/lib/package.json

{
  "name": "@test/lib",
  ...
  "dependencies": {
    "debug": "^4.3.3"
  }
}

（3）内部依赖

$ pnpm i @test/lib --filter @test/app    # 指定命令空间 @test/lib，指定为 @test/app 添加依赖

packages/app/package.json

{
  "name": "@test/app",
  ...
  "dependencies": {
    "@test/lib": "workspace:^1.0.0"
  }
}

5. 目录结构

test-pnpm-monorepo
├── README.md
├── package.json
├── packages
|  ├── app
|  |  ├── package.json
|  |  └── pnpm-lock.yaml
|  └── lib
|     ├── package.json
|     └── pnpm-lock.yaml
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

6. 写一些示例代码

github: thzt/test-pnpm-monorepo