正在加载文档...
文档内容较大,正在处理中,请稍候
正在加载文档...
文档内容较大,正在处理中,请稍候
本项目采用 pnpm workspace 架构,将多个应用统一管理在一个代码仓库中,实现了依赖共享和统一的构建流程。
project_root/
├── apps/ # 各个子应用
│ ├── app-rn-ts/ # React Native TypeScript 应用
│ ├── doc-next-ts/ # Next.js TypeScript 文档应用
│ ├── node-express-mysql/ # Node.js + Express + MySQL 后端应用
│ └── react-antd-webpack/ # React + Ant Design + Webpack 前端应用
├── node_modules/ # 统一的依赖目录(由 pnpm 管理)
├── pnpm-workspace.yaml # pnpm workspace 配置文件
├── package.json # 根目录配置文件
└── turbo.json # Turbo 构建配置文件# 在项目根目录执行,安装所有应用的依赖
pnpm install# 为 node-express-mysql 应用安装 express
pnpm add express --filter node-express-mysql
# 为特定应用安装开发依赖
pnpm add -D nodemon --filter node-express-mysql# 所有应用都可以使用的工具
pnpm add -D -w eslint typescript# 在所有应用中运行 dev 命令
pnpm run dev
# 在特定应用中运行命令
pnpm run dev --filter node-express-mysql
# 构建所有应用
pnpm run build
# 测试所有应用
pnpm run test# 启动所有应用(并行运行)
pnpm run dev
# 启动特定应用
pnpm run dev --filter node-express-mysql
pnpm run dev --filter react-antd-webpack
pnpm run dev --filter doc-next-ts# 进入应用目录
cd apps/node-express-mysql
# 使用 pnpm
pnpm dev
# 或使用 npm(仍然可用)
npm run dev
# 或使用 yarn(如果熟悉)
yarn dev# 使用 Turbo 的过滤器
turbo run dev --filter=node-express-mysql
# 并行运行多个应用
turbo run dev --filter="{node-express-mysql,react-antd-webpack}"
# 运行有依赖关系的任务
turbo run build --filter="^node-express-mysql"pnpm run dev --filter node-express-mysqlpnpm run dev --filter react-antd-webpackpnpm run dev --filter doc-next-ts技术栈:React Native + TypeScript
启动方式:
# iOS
cd apps/app-rn-ts && pnpm run ios
# Android
cd apps/app-rn-ts && pnpm run android# 安装依赖
pnpm install # 安装所有依赖
pnpm add <pkg> # 为根目录安装
pnpm add <pkg> -D # 安装开发依赖
pnpm add <pkg> --filter <app> # 为特定应用安装
# 更新依赖
pnpm update # 更新所有依赖
pnpm update <pkg> # 更新特定包
# 移除依赖
pnpm remove <pkg> # 从所有应用移除
pnpm remove <pkg> --filter <app> # 从特定应用移除# 开发模式
pnpm dev # 运行所有应用
pnpm dev --filter <app> # 运行特定应用
# 构建
pnpm build # 构建所有应用
pnpm build --filter <app> # 构建特定应用
# 测试
pnpm test # 测试所有应用
pnpm test --filter <app> # 测试特定应用
# 代码检查
pnpm lint # 检查所有应用
pnpm lint --filter <app> # 检查特定应用# 清理
pnpm run clean # 清理所有构建产物
pnpm run clean --filter <app> # 清理特定应用
# 查看依赖树
pnpm list # 查看所有依赖
pnpm list --filter <app> # 查看特定应用依赖
# 查找某个包
pnpm why <pkg> # 查看包的安装原因pnpm update -i --latest 保持共享依赖版本一致# 1. 克隆项目后
git clone <repo>
cd project_root
pnpm install
# 2. 开发时
# 同时启动前后端
pnpm run dev --filter="{node-express-mysql,react-antd-webpack}"
# 3. 或使用多个终端
# 终端1:后端
pnpm run dev --filter node-express-mysql
# 终端2:前端
pnpm run dev --filter react-antd-webpack# 1. 创建新目录
mkdir apps/new-app
cd apps/new-app
# 2. 初始化 package.json
pnpm init
# 3. 在根目录的 package.json 的 workspaces 中添加新应用
# "workspaces": ["apps/*"]
# 4. 安装依赖
cd ../../
pnpm install# .github/workflows/ci.yml 示例
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: pnpm/action-setup@v2
with:
version: 8
- run: pnpm install
- run: pnpm test
- run: pnpm build# 清理并重新安装
rm -rf node_modules
rm pnpm-lock.yaml
pnpm install
# 清理特定应用
cd apps/node-express-mysql
rm -rf node_modules
cd ../../
pnpm installlsof -i :8888# 如果遇到权限问题,执行
chmod +x node_modules/.bin/*Turbo 是 Vercel 开发的 JavaScript/TypeScript 单代码仓库构建系统,专为 monorepo 设计。它通过智能缓存和任务依赖管理,大大提升了构建效率。
# Turbo 知道只有 src/app.js 改变了
turbo run build
# → 只重新构建依赖这个文件的部分
# 完整构建
turbo run build --force# 自动检测任务依赖关系,并行执行
turbo run build{
"$schema": "https://turbo.build/schema.json",
"globalDependencies": ["**/.env.*local", ".env"],
"tasks": {
"build": {
"dependsOn": ["^build"], // 依赖上游构建完成
"outputs": ["dist/**", ".next/**"], // 输出文件模式
"env": ["NODE_ENV"], // 环境变量
"inputs": ["src/**/*.{ts,tsx}"] // 输入文件模式
},
"dev": {
"cache": false, // 开发模式不缓存
"persistent": true // 持续运行
}
}
}| 属性 | 说明 | 示例 |
|---|---|---|
dependsOn |
任务依赖关系 | "^build" 依赖所有父级构建 |
outputs |
输出文件路径 | ["dist/**", ".next/**"] |
inputs |
输入文件模式 | ["src/**/*.tsx"] |
cache |
是否缓存任务 | true 或 false |
env |
环境变量数组 | ["NODE_ENV", "API_URL"] |
# 运行所有任务
turbo run dev
# 运行特定任务
turbo run build
# 并行运行
turbo run dev --parallel# 运行特定项目
turbo run build --filter=react-antd-webpack
# 多个特定项目
turbo run build --filter="{react-antd-webpack,vue3-admin}"
# 使用通配符
turbo run build --filter="react-*"
# 排除某些项目
turbo run build --filter="!backend-*"# 只影响依赖关系,不运行任务
turbo run build --filter=react-antd-webpack --dry-run=json
# 显示任务依赖图
turbo run build --filter=react-antd-webpack --dry-run=graph{
"tasks": {
"build": {
"dependsOn": ["^build"] // 等待所有依赖包的构建完成
},
"deploy": {
"dependsOn": ["build", "test"] // 先构建,再测试,最后部署
}
}
}.turbo/
├── cache/ # 全局缓存
│ └── <hash>.tar.gz
└── .gitignoreTurbo 使用以下信息计算缓存哈希:
{
"tasks": {
"build": {
// 1. 明确指定输出目录
"outputs": ["dist/**"],
// 2. 限制输入文件范围
"inputs": ["src/**/*.{ts,tsx}"],
// 3. 环境变量白名单
"env": ["NODE_ENV"],
// 4. 依赖上游任务
"dependsOn": ["^build"]
}
}
}{
"tasks": {
// 前端项目 - 需要 build
"react-antd-webpack": {
"outputs": ["dist/**"],
"inputs": ["src/**/*.{ts,tsx,js,jsx}"]
},
// 后端项目 - 不需要 build
"node-express-mysql": {
// 没有 build 脚本,Turbo 会跳过
}
}
}{
"tasks": {
// 1. 限制输入文件范围
"build": {
"inputs": ["src/**/*.{ts,tsx}"],
"outputs": ["dist/**"]
},
// 2. 环境变量白名单
"build": {
"env": ["NODE_ENV", "API_URL"]
},
// 3. 合理的依赖关系
"deploy": {
"dependsOn": ["build", "test"]
}
}
}# 分层构建策略
turbo run build:packages # 先构建所有包
turbo run build:apps # 再构建应用
# 并行构建策略
turbo run build --parallel --filter="frontend/*"
# 选择性构建
turbo run build --filter="production"
turbo run build --filter="staging"- name: Setup Turbo
uses: vercel/turbo-action@v1.2
- name: Build
run: turbo run build- name: Cache Turbo
uses: actions/cache@v3
with:
path: .turbo
key: ${{ runner.os }}-turbo-${{ hashFiles('**/turbo.json') }}-${{ hashFiles('**/package-lock.json') }}# 并行运行不冲突的任务
pnpm -r dev
# 使用 Turbo 的并行能力
turbo run dev --parallel# 清理 Turbo 缓存
turbo clean
# 或手动删除
rm -rf .turbo
# 重新构建
turbo run build --force# 检查任务依赖
turbo run build --dry-run=graph
# 显示任务执行计划
turbo run build --dry-run=detailed# 检查输出文件是否匹配
turbo run build --force
# 详细日志
turbo run build --log-level=debug// turbo.js
module.exports = {
pipeline: {
build: {
dependsOn: ["^build"],
outputs: ["dist/**"],
env: process.env.NODE_ENV ? ["NODE_ENV"] : [],
},
},
};# 只在特定条件下构建
turbo run build --filter="production"# 显示任务执行时间
turbo run build --summarize
# 实时查看日志
turbo run dev --filter=react-antd-webpack --log-prefix="frontend"Turbo 通过以下方式为 Monorepo 带来巨大价值:
本 Monorepo 架构通过 pnpm workspace + Turbo 实现了:
开始扩展吧