Basyc的灵质空间

1
# 在 Multi-repo 中，共享代码很麻烦
2
# 需要发布到 npm 或使用复杂的链接工具
3

4
# 在 Monorepo 中，直接引用即可
5
import { Button } from '@my-org/ui-components'
6
import { formatDate } from '@my-org/utils'

1
# Multi-repo：需要多个 PR
2
commit 1: 修复组件库 bug
3
commit 2: 在主应用中应用修复
4
commit 3: 更新管理后台依赖
5

6
# Monorepo：一个 PR 搞定
7
commit: 同时修复组件库和所有使用它的应用

1
{
2
  "name": "my-monorepo",
3
  "private": true,
4
  "scripts": {
5
    "dev": "pnpm -F \"./apps/*\" dev",
6
    "build": "pnpm -r build",
7
    "lint": "pnpm -r lint"
8
  }
9
}

1
{
2
  "namedInputs": {
3
    "default": ["{projectRoot}/**/*"]
4
  },
5
  "targetDefaults": {
6
    "build": {
7
      "cache": true,
8
      "dependsOn": ["^build"]
9
    }
10
  }
11
}

1
my-frontend-monorepo/
2
├── apps/
3
│   ├── website/           # 官方网站
4
│   └── admin/             # 管理后台
5
├── packages/
6
│   ├── ui-lib/            # UI 组件库
7
│   ├── shared-utils/      # 工具函数
8
│   └── config/            # 共享配置
9
├── pnpm-workspace.yaml
10
└── package.json

1
packages:
2
  - 'apps/*'
3
  - 'packages/*'

1
{
2
  "name": "my-frontend-monorepo",
3
  "private": true,
4
  "scripts": {
5
    "dev": "pnpm -F --parallel dev",
6
    "build": "turbo run build",
7
    "lint": "eslint \"apps/**/*.{ts,tsx}\" \"packages/**/*.{ts,tsx}\"",
8
    "format": "prettier --write \"**/*.{ts,tsx,json,md}\"",
9
    "changeset": "changeset",
10
    "version": "changeset version",
11
    "release": "pnpm build && changeset publish"
12
  },
13
  "devDependencies": {
14
    "@changesets/cli": "^2.26.0",
15
    "turbo": "^1.10.0",
16
    "typescript": "^5.2.0",
17
    "prettier": "^3.0.0",
18
    "eslint": "^8.50.0"
19
  }
20
}

1
{
2
  "name": "@my-org/ui-lib",
3
  "version": "1.0.0",
4
  "main": "./dist/index.js",
5
  "types": "./dist/index.d.ts",
6
  "scripts": {
7
    "build": "vite build",
8
    "dev": "vite build --watch"
9
  },
10
  "dependencies": {
11
    "@my-org/shared-utils": "workspace:*"
12
  }
13
}

1
{
2
  "name": "@my-org/website",
3
  "version": "1.0.0",
4
  "scripts": {
5
    "dev": "vite",
6
    "build": "vite build"
7
  },
8
  "dependencies": {
9
    "@my-org/ui-lib": "workspace:*",
10
    "@my-org/shared-utils": "workspace:*"
11
  }
12
}

1
# 1. 修改组件库代码
2
cd packages/ui-lib
3
vim components/Button.tsx
4

5
# 2. 启动组件库开发模式
6
pnpm dev
7

8
# 3. 在应用中实时查看效果
9
cd ../website
10
pnpm dev  # 自动使用最新的组件库代码

1
# 重构工具函数，自动影响所有使用的地方
2
cd packages/shared-utils
3
vim utils/format.ts  # 重构格式化函数
4

5
# 运行测试确保所有项目正常
6
pnpm -r test

1
# 1. 创建变更集
2
pnpm changeset
3
# 选择需要升级的包和版本类型
4

5
# 2. 更新版本号
6
pnpm changeset version
7

8
# 3. 构建所有包
9
pnpm build
10

11
# 4. 发布到 npm
12
pnpm release

1
# 首次构建：5分钟
2
turbo run build
3

4
# 未修改代码的第二次构建：10秒（使用缓存）
5
turbo run build

1
packages/
2
├── ui/              # UI 组件
3
├── utils/           # 工具函数
4
├── types/           # 类型定义
5
├── config/          # 配置文件
6
└── shared/          # 共享资源

1
# 主要版本：不兼容的 API 变更
2
npm version major
3

4
# 次要版本：向后兼容的新功能
5
npm version minor
6

7
# 补丁版本：向后兼容的错误修复
8
npm version patch

1
# 开发 → 测试 → 变更集 → 版本更新 → 发布
2
dev → test → changeset → version → publish