# monorepo-demo

**Repository Path**: Fhup/monorepo-demo

## Basic Information

- **Project Name**: monorepo-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-14
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + pnpm + Vite Monorepo 项目

基于 React、pnpm 和 Vite 的 monorepo 架构项目，全面使用 TypeScript。

## 项目结构

```
monorepo/
├── package.json              # 根目录配置（主应用）
├── tsconfig.json             # TypeScript 基础配置
├── vite.config.js           # 主应用 Vite 配置
├── index.html               # 主应用入口 HTML
├── .eslintrc.cjs            # ESLint 配置
├── .prettierrc              # Prettier 配置
├── .editorconfig            # 编辑器配置
├── .husky/                  # Git Hooks
├── .vscode/                 # VSCode 配置
├── pnpm-workspace.yaml      # pnpm workspace 配置
├── src/                     # 主应用源码 (TypeScript)
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
└── packages/                # 共享包目录
    ├── ui/                  # UI 组件库 (TypeScript)
    │   └── src/
    │       ├── Button.tsx
    │       ├── Card.tsx
    │       └── index.ts
    ├── types/               # TypeScript 类型定义
    │   └── src/
    │       └── index.ts
    └── utils/               # 工具函数库 (TypeScript)
        └── src/
            ├── date.ts
            ├── string.ts
            └── index.ts
```

## 技术栈

- **语言**: TypeScript
- **包管理器**: pnpm（支持 workspace）
- **构建工具**: Vite 5.x
- **前端框架**: React 18.x
- **代码规范**: ESLint + Prettier
- **Git Hooks**: Husky + lint-staged

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

访问 http://localhost:3000 查看应用

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

## 可用脚本

| 命令                | 说明                |
| ------------------- | ------------------- |
| `pnpm dev`          | 启动开发服务器      |
| `pnpm build`        | 构建生产版本        |
| `pnpm preview`      | 预览生产构建        |
| `pnpm lint`         | 代码规范检查        |
| `pnpm lint:fix`     | 自动修复 lint 问题  |
| `pnpm format`       | 格式化代码          |
| `pnpm format:check` | 检查代码格式        |
| `pnpm type-check`   | TypeScript 类型检查 |
| `pnpm clean`        | 清理构建产物        |

## Monorepo 架构说明

### 1. 主应用在根目录

主应用位于根目录，作为整个 monorepo 的入口：

- `package.json` - 主应用配置和依赖
- `vite.config.js` - Vite 构建配置
- `index.html` - 入口 HTML
- `src/` - 主应用 TypeScript 源码

### 2. packages 目录包含扩展包

所有可复用的包都放在 `packages/` 目录下：

#### 📦 @monorepo/ui - UI 组件库

- `Button` - 支持三种变体：primary / secondary / outline
- `Card` - 带悬停动效的卡片组件
- 导出完整 TypeScript 类型

#### 📝 @monorepo/types - TypeScript 类型定义

- `User` - 用户类型
- `ApiResponse<T>` - API 响应类型
- `ButtonProps` / `CardProps` - 组件 Props 类型
- `FormatDateFunction` / `GenerateIdFunction` - 函数类型

#### 🛠 @monorepo/utils - 工具函数库

- `formatDate` / `getRelativeTime` - 日期格式化
- `generateId` - 生成唯一 ID
- `capitalize` / `truncate` - 字符串处理
- `camelToKebab` / `kebabToCamel` - 命名转换
- 支持子路径导入：`@monorepo/utils/date`

### 3. 包之间的依赖关系

主应用引用 packages 下的包：

```json
{
  "dependencies": {
    "@monorepo/ui": "workspace:*",
    "@monorepo/types": "workspace:*",
    "@monorepo/utils": "workspace:*"
  }
}
```

使用 `workspace:*` 协议来引用本地包。

### 4. TypeScript 配置

项目使用分层的 TypeScript 配置：

- `tsconfig.json` - 根基础配置（严格模式 + 路径映射）
- `packages/*/tsconfig.json` - 各包配置（继承根配置 + 项目引用）

### 5. 代码规范

- **ESLint**: 集成 React + TypeScript 规则
- **Prettier**: 统一代码风格
- **Husky**: Git 提交前自动检查
- **lint-staged**: 只检查暂存的文件

## 组件导入使用

在主应用中直接导入共享包：

```tsx
import { Button, Card } from '@monorepo/ui'
import { formatDate, generateId } from '@monorepo/utils'
import type { User, ApiResponse } from '@monorepo/types'

function App() {
  return (
    <Card title="示例">
      <Button variant="primary" onClick={() => console.log('clicked')}>
        点击按钮
      </Button>
      <p>{formatDate(new Date())}</p>
    </Card>
  )
}
```

## 扩展指南

### 添加新的共享包

1. 在 `packages/` 目录下创建新包：

```bash
mkdir -p packages/hooks/src
```

2. 创建 `package.json`：

```json
{
  "name": "@monorepo/hooks",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "exports": {
    ".": { "import": "./src/index.ts", "types": "./src/index.ts" }
  },
  "files": ["src"],
  "sideEffects": false
}
```

3. 创建 `tsconfig.json`：

```json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}
```

4. 在主应用中引用：

```json
{
  "dependencies": {
    "@monorepo/hooks": "workspace:*"
  }
}
```

### 可扩展的包类型

- **hooks** - React Hooks 库
- **constants** - 共享常量配置
- **services** - API 服务层
- **store** - 状态管理
- **styles** - 共享样式和主题

## 许可证

MIT