首页 › React › 工程化与架构

pnpm Monorepo

npm install -g pnpm

# pnpm-workspace.yaml
packages:
  - 'apps/*'           # 应用（web, admin）
  - 'packages/*'       # 共享包（ui, utils, config-eslint）

project/
├── pnpm-workspace.yaml
├── package.json
├── apps/
│   ├── web/               # 主应用
│   │   ├── package.json   # → @myapp/web
│   │   └── src/
│   └── admin/             # 管理后台
│       └── package.json   # → @myapp/admin
├── packages/
│   ├── ui/                # 共享组件库
│   │   ├── package.json   # → @myapp/ui
│   │   └── src/
│   ├── utils/             # 工具函数
│   │   └── package.json   # → @myapp/utils
│   └── config-eslint/     # ESLint 配置
└── package.json

// apps/web/package.json
{
  "name": "@myapp/web",
  "dependencies": {
    "@myapp/ui": "workspace:*",        // 本地引用
    "@myapp/utils": "workspace:*",
    "react": "^18.0.0"
  }
}

# 安装所有包
pnpm install

# 在 web 包中添加依赖
pnpm --filter @myapp/web add axios

# 运行构建（按依赖顺序）
pnpm --filter @myapp/web build
pnpm -r build                        # 所有包构建

GitHub Actions CI/CD

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - run: pnpm install
      - run: pnpm lint
      - run: pnpm test

  build-and-deploy:
    needs: lint-and-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - run: pnpm install
      - run: pnpm --filter @myapp/web build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          working-directory: ./apps/web

小结

• pnpm workspace + pnpm-workspace.yaml 搭建 Monorepo。
• workspace:* 本地包引用，--filter 针对特定包执行命令。
• 共享 UI 包、工具包、ESLint 配置，避免重复。
• GitHub Actions 自动化 CI/CD：lint → test → build → deploy。

上一节：TypeScript + React 下一节：项目初始化与 UI 组件

贡献者: 布欧-Lewyon