Vite 与 Monorepo 多应用架构：pnpm workspace、共享包与构建隔离

mkdir my-monorepo && cd my-monorepo
pnpm init
# 创建 pnpm-workspace.yaml

packages:
  - 'apps/*'          # 应用
  - 'packages/*'      # 共享包

# 应用
pnpm create vite apps/admin --template react-ts
pnpm create vite apps/web --template react-ts

# 共享包（手动创建 packages/ui）
mkdir -p packages/ui/src

// packages/ui/package.json
{
  "name": "@my/ui",
  "version": "0.0.0",
  "main": "src/index.ts",       // 源码直引
  "types": "src/index.ts",
  "peerDependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

pnpm --filter @my/admin add @my/ui@workspace:*

// apps/admin/src/App.tsx
import { Button } from '@my/ui'

// apps/admin/vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    // 让 Vite 直接处理共享包源码中的 TS/JSX
    alias: {
      '@my/ui': '/packages/ui/src/index.ts',
    },
  },
  build: {
    commonjsOptions: {
      include: [/packages/, /node_modules/],
    },
  },
})

同一库打多份 -> 体积膨胀
React 两份实例 -> hooks 状态断裂

// 各应用 vite.config.ts
export default defineConfig({
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
})

export default defineConfig({
  optimizeDeps: {
    include: ['react', 'react-dom', '@my/ui'],  // 预构建共享包
    exclude: ['@my/ui'],                        // 或排除以走源码
  },
})

// 根 package.json
{
  "scripts": {
    "dev:admin": "pnpm --filter @my/admin dev",
    "dev:web": "pnpm --filter @my/web dev",
    "build:all": "pnpm -r --filter './apps/*' build"
  }
}

apps/admin/dist/   # 管理后台产物
apps/web/dist/     # 官网产物

# 用 pnpm 的 build 缓存
pnpm --filter @my/ui build
# 或配合 CI 缓存 node_modules 与 vite 缓存

export default defineConfig({
  cacheDir: '.vite-cache',   // 自定义缓存目录（默认 node_modules/.vite）
})

my-monorepo/
├── apps/
│   ├── admin/               # 管理后台
│   │   ├── src/
│   │   └── vite.config.ts
│   └── web/                 # 官网
│       ├── src/
│       └── vite.config.ts
├── packages/
│   ├── ui/                  # 共享 UI 组件库
│   │   └── src/
│   ├── utils/               # 共享工具函数
│   └── types/               # 共享类型定义
├── pnpm-workspace.yaml
├── package.json
└── tsconfig.base.json       # 共享 TS 配置

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@my/ui": ["packages/ui/src/index.ts"]
    }
  }
}

// packages/ui/vite.config.ts（库模式）
import { defineConfig } from 'vite'
import { resolve } from 'node:path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyUI',
      fileName: (format) => `my-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

# 将共享包 link 到各应用
pnpm --filter @my/admin link @my/ui

# 或直接 workspace:* 依赖，pnpm 自动建立链接

编辑共享包 .ts 文件 -> 应用到 Vite transform -> HMR 触发
注意：共享包的 CSS 文件、JSON 同样会联动

# .github/workflows/build.yml
name: Build Monorepo
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      # 共享包先构建
      - run: pnpm --filter @my/ui build
      # 应用并行构建
      - run: pnpm -r --filter './apps/*' build

# pnpm 支持按拓扑顺序构建
pnpm -r build
# 会先构建被依赖的包，再构建依赖方

workspace 连接(源码直引) -> 依赖去重(dedupe) -> 构建隔离(独立 config) -> CI 拓扑构建