当前位置：首页 > web >正文

Turborepo + Vite + Next.js + Shadcn Monorepo 项目构建

web 2025/5/15 6:10:45

从零开始构建 Turborepo + Vite + Next.js + Shadcn 的 Monorepo 项目的完整流程。构建一个现代、高性能的 Web 系统，包含：

多个前端应用（Next.js 和 Vite 都支持）
可共享的 UI 组件库（使用 shadcn/ui）
高效的构建与缓存支持（通过 Turborepo）
使用 pnpm 管理依赖

🧱 最终结构预览

my-monorepo/
├── apps/
│   ├── web/         # Next.js 应用
│   └── docs/        # Vite 应用（文档或营销页）
├── packages/
│   └── ui/          # 共用 UI 组件库，shadcn/ui
├── turbo.json       # Turborepo 配置
├── pnpm-workspace.yaml
├── tsconfig.json
└── package.json     # 根目录 package.json

🛠️ 步骤一：初始化项目

mkdir my-monorepo && cd my-monorepo
pnpm init -y

安装必要的依赖：

pnpm add -D turbo typescript

创建 pnpm-workspace.yaml：

# pnpm-workspace.yaml
packages:- apps/*- packages/*

✨ 步骤二：初始化 Turborepo 配置

创建 turbo.json：

{"$schema": "https://turborepo.org/schema.json","pipeline": {"build": {"dependsOn": ["^build"],"outputs": [".next/**", "dist/**"]},"dev": {"cache": false,"persistent": true},"lint": {}}
}

🧱 步骤三：添加 Next.js 应用（web）

cd my-monorepo
pnpm create next-app apps/web --typescript --app

进入 apps/web，安装依赖：

cd apps/web
pnpm install

🔥 步骤四：安装 shadcn/ui 到 web 应用中

cd apps/web
npx shadcn-ui@latest init

使用默认配置（选择 Tailwind、TypeScript、默认路径），会自动创建好 components/ui 和 tailwind.config.ts。

📘 步骤五：添加 Vite 应用（docs）

cd ../../
pnpm create vite apps/docs --template react-ts
cd apps/docs
pnpm install

然后配置 TailwindCSS：

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改 tailwind.config.js：

// apps/docs/tailwind.config.js
export default {content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}","../../packages/ui/**/*.{js,ts,jsx,tsx}"],theme: {extend: {}},plugins: []
}

在 src/index.css 中加入：

@tailwind base;
@tailwind components;
@tailwind utilities;

🧩 步骤六：创建共享 UI 组件库（packages/ui）

mkdir -p packages/ui/src
cd packages/ui
pnpm init -y

安装 React + Tailwind 相关依赖：

pnpm add react react-dom
pnpm add -D typescript tailwindcss postcss autoprefixer

初始化 tsconfig.json：

{"compilerOptions": {"target": "ESNext","module": "ESNext","jsx": "react-jsx","declaration": true,"outDir": "dist","strict": true,"esModuleInterop": true,"moduleResolution": "Node","baseUrl": ".","paths": {}},"include": ["src"]
}

创建一个组件：

// packages/ui/src/button.tsx
import { ButtonHTMLAttributes } from "react"export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {return (<buttonclassName="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"{...props}/>)
}

packages/ui/package.json 添加：

{"name": "ui","main": "./src/index.ts","type": "module"
}

🧩 步骤七：在 web/docs 中使用 `packages/ui`

安装本地依赖：

# 根目录执行
pnpm add ui --workspace --filter web
pnpm add ui --workspace --filter docs

然后在 apps/web 和 apps/docs 中都可以引入：

import { Button } from "ui"

🧪 步骤八：配置 TypeScript 共享设置（可选）

根目录 tsconfig.json：

{"compilerOptions": {"baseUrl": ".","paths": {"ui": ["packages/ui/src"]}}
}

然后在 apps/web/tsconfig.json 中使用：

{"extends": "../../tsconfig.json"
}

🚀 步骤九：运行开发环境

# 运行 Next.js 应用
pnpm dev --filter web# 运行 Vite 应用
pnpm dev --filter docs

✅ 总结

Monorepo 架构，特点如下：

特性	技术栈
Monorepo 构建工具	Turborepo
包管理器	pnpm + workspace
主站应用（App Router）	Next.js + TypeScript
文档/营销页	Vite + React
UI 组件库	packages/ui + shadcn/ui
样式	Tailwind CSS
构建缓存与依赖追踪	Turbo pipeline