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

从零开始构建 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/uitailwind.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 (
    <button
      className="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/webapps/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
Vue3 + Vite + TypeScript 项目中,配置 `tsconfig.json` 文件以支持根目录设置时,需要确保 TypeScript 编译器能够正确识别源代码的结构,并为模块解析提供合理的路径映射。以下是一个完整的配置方案: ### 配置 `tsconfig.json` 支持根目录 在项目根目录下创建或修改 `tsconfig.json` 文件,添加如下内容: ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "importHelpers": true, "isolatedModules": true, "noEmit": true, "baseUrl": ".", "types": ["vite-plugin-vue-type-imports", "vite/client"], "paths": { "@/*": ["./src/*"] }, "experimentalDecorators": true }, "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"] } ``` 该配置通过 `baseUrl` 和 `paths` 字段实现根目录路径别名的支持。其中 `baseUrl` 设为当前目录(`.`),表示相对路径的基准目录;`paths` 中 `"@/*": ["./src/*"]` 表示所有以 `@/` 开头的导入路径将被解析为 `src` 目录下的对应位置[^1]。 ### 声明 `.vue` 文件类型 为了让 TypeScript 能够识别 `.vue` 文件中的组件定义,需在 `src` 目录下创建一个名为 `shims-vue.d.ts` 的声明文件,并添加如下内容: ```typescript declare module '*.vue' { import { DefineComponent } from 'vue'; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any>; export default component; } ``` 此声明使得项目中可以使用类似 `import MyComponent from '@/components/MyComponent.vue'` 的方式引入 Vue 组件,而不会触发 TypeScript 类型检查错误[^4]。 ### 支持自动加载全局样式和 SCSS 如果项目中使用了 SCSS 或其他 CSS 预处理器,还需要安装相应的依赖并进行配置: ```bash npm install node-sass sass-loader sass -D ``` 然后,在 `vite.config.ts` 中配置别名以支持全局样式引用: ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }); ``` 这将允许直接通过 `@/assets/styles/global.scss` 这样的路径引用样式资源,提升开发效率[^3]。 ### 示例项目结构 假设项目结构如下: ``` my-project/ ├── src/ │ ├── main.ts │ ├── components/ │ │ └── HelloWorld.vue │ └── assets/ │ └── styles/ │ └── global.scss ├── tsconfig.json └── vite.config.ts ``` 上述配置将确保 TypeScript 编译器和 Vite 构建工具都能正确处理项目内的模块路径、Vue 单文件组件以及样式资源。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值