如何用pnpm配置Mono repo

当代开发中,前端比较推崇的是mono repo的方式, 但是mono repo的配置比较麻烦, 本文将介绍如何用pnpm配置mono repo

初始化配置

1. pnpm init: 初始化
2. mkdir packages: 创建packages文件夹
3. cd packages: 进入packages文件夹
4. mkdir web server tools: 创建web, server, tools文件夹
5. cd web: 进入web文件夹
6. pnpm init: 初始化web项目
7. cd ../server: 进入server文件夹
8. pnpm init: 初始化server项目
9. cd ../tools: 进入tools文件夹
10. pnpm init: 初始化tools项目
11. cd ..: 退回到packages文件夹

环境配置

• packages
  • web: web端的项目
  • server: server端的项目
  • tools: tools的项目

创建 pnpm-workspace.yaml 文件

1. 创建pnpm-workspace.yaml文件: touch pnpm-workspace.yaml
2. 编辑pnpm-workspace.yaml文件: vim pnpm-workspace.yaml
3. 添加packages配置:

name: mono
packages:
  - 'packages/*'
    # exclude packages that are inside test directories
  - '!**/test/**'

指定pnpm为默认包管理器

执行: pnpm install安装依赖 指定使用pnpm: 在root的package.json中添加"preinstall": npx -y only-allow pnpm

目录结构

.
├── ReadMe.md
├── node_modules
│   ├── @changesets
│   ├── prettier -> .pnpm/prettier@2.8.8/node_modules/prettier
│   └── typescript -> .pnpm/typescript@5.0.4/node_modules/typescript
├── package.json
├── packages
│   ├── server
│   ├── tools
│   └── web
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

依赖配置

• 修改web的packages.json的name为@mono/web, server的packages.json的name为@mono/server, tools的packages.json的name为@mono/tools
• pnpm add -dw typescript: 安装typescript到root项目

// before
{
    "name": "web",
}

// after
{
    "name": "@mono/web",
}

web

• pnpm install react --filter @mono/web: 安装react到web项目
• pnpm install --save-dev @types/react --filter @mono/web: 安装@types/react到web项目

server

• pnpm install express --filter @mono/server: 安装express到server项目
• pnpm install --save-dev @types/express --filter @mono/server: 安装@types/express到server项目

安装packages的依赖（子项目相互依赖）

• sudo pnpm i @mono/web -r --filter @mono/server: 安装server项目的依赖web项目
• sudo pnpm i @mono/server -r --filter @mono/web: 安装web项目的依赖server项目

发布

安装后会出现:"@mono/web": "workspaces:^1.0.0"的依赖, 在pnpm publish后自动修改为"@mono/web": "^1.0.0"

• 如果是私有包, 需要在pnpm publish前修改"@mono/web": "workspaces:^1.0.0"为"@mono/web": "^1.0.0"

• 如果是公有包, 可以直接pnpm publish

• 如果要在私有仓库发布包,指定pnpm publish --registry=http://localhost:4873

• pnpm addUser: 创建用户

• pnpm login: 登录用户

• pnpm login --scope @mono: 登录@mono的用户

• pnpm publish --access public --filter mono: 发布mono的项目

• pnpm publish --access public: 发布root项目

• pnpm publish --access public --filter @mono/web: 发布web项目

• pnpm publish --access public --filter @mono/server: 发布server项目

• pnpm publish --access public --filter @mono/tools: 发布tools项目

// before  
"dependencies": {
    "@panda/tools": "workspace:^1.0.0"
  },
// after
"dependencies": {
    "@panda/tools": "^1.0.0"
  },

ChangeLog

• pnpm add -dw @changesets/cli: 安装changesets到root项目
• pnpm changeset init: 初始化changesets
• pnpm changeset version: 生成changesets的version

指令

开发

• pnpm run dev: 启动root项目
• pnpm run dev --filter @mono/web: 启动web项目
• pnpm run dev --filter @mono/server: 启动server项目
• pnpm run dev --filter @mono/tools: 启动tools项目
• pnpm -C packages/web run dev && pnpm -C packages/server run dev: 启动web和server项目
• clean -> rm -rf node_modules **/*/node_modules 删除所有node_modules文件夹

Build

• pnpm run build: 打包root项目
• pnpm run build --filter @mono/web: 打包web项目
• pnpm run build --filter @mono/server: 打包server项目
• pnpm run build --filter @mono/tools: 打包tools项目

Test

• pnpm run test: 测试root项目
• pnpm run test --filter @mono/web: 测试web项目
• pnpm run test --filter @mono/server: 测试server项目
• pnpm run test --filter @mono/tools: 测试tools项目
• pnpm run test --filter @mono/web -- --watch: 测试web项目并且监听
• pnpm run test --filter @mono/server -- --watch: 测试server项目并且监听
• pnpm run test --filter @mono/tools -- --watch: 测试tools项目并且监听
• pnpm run test --filter @mono/web -- --coverage: 测试web项目并且生成测试覆盖率
• pnpm run test --filter @mono/server -- --coverage: 测试server项目并且生成测试覆盖率
• pnpm run test --filter @mono/tools -- --coverage: 测试tools项目并且生成测试覆盖率
• pnpm run test --filter @mono/web -- --watch --coverage: 测试web项目并且监听并且生成测试覆盖率
• pnpm run test --filter @mono/server -- --watch --coverage: 测试server项目并且监听并且生成测试覆盖率
• pnpm run test --filter @mono/tools -- --watch --coverage: 测试tools项目并且监听并且生成测试覆盖率