React UI 组件库

基于 Monorepo 架构的 React 组件库，采用 TypeScript + PropTypes 双重校验，使用 Rollup 进行打包。

特性

• 🏗️ Monorepo 架构: 使用 npm workspaces 管理多包项目
• 🔒 双重类型校验: TypeScript 编译时校验 + PropTypes 运行时校验
• 📦 Rollup 打包: 支持 ESM 和 CJS 两种格式输出
• 🎨 代码规范: ESLint + Prettier 确保代码质量
• 🚀 开发体验: 热更新开发环境，完整的 TypeScript 支持

项目结构

组件库/
├── packages/
│   ├── components/          # 组件包
│   │   ├── src/
│   │   │   ├── Toast/      # Toast 组件
│   │   │   └── index.ts    # 入口文件
│   │   ├── types/          # TypeScript 声明
│   │   └── package.json
│   ├── utils/              # 工具包
│   │   ├── src/
│   │   └── package.json
│   └── example/            # 示例应用
│       ├── src/
│       └── package.json
├── rollup.config.js        # Rollup 配置
├── tsconfig.json           # TypeScript 配置
├── .eslintrc.js           # ESLint 配置
├── .prettierrc            # Prettier 配置
└── package.json           # 根配置

安装依赖

pnpm install

开发命令

# 启动开发服务器（示例应用）
pnpm run dev

# 构建组件库
pnpm run build

# 代码格式化
pnpm run format

# 代码检查
pnpm run lint

# 类型检查
pnpm run type-check

# 清理构建文件
pnpm run clean

技术栈

• React 18 - 用户界面库
• TypeScript - 类型安全
• PropTypes - 运行时类型校验
• Rollup - 打包工具
• ESLint + Prettier - 代码质量
• Vite - 开发工具
• npm workspaces - Monorepo 管理

Git 配置

项目包含以下 Git 配置文件：

• .gitignore - 忽略不必要的文件（依赖、构建产物、缓存等）
• .gitattributes - 配置行尾符和语言检测
• packages/example/.gitignore - 示例应用特定的忽略规则

构建产物策略

• 组件库的 dist/ 目录默认不被忽略，以便 npm 发布
• 示例应用的构建产物被忽略，不需要提交

开发指南

添加新组件

1. 在 packages/components/src/ 下创建组件目录
2. 创建组件文件、类型定义、样式文件
3. 添加 PropTypes 验证
4. 在 src/index.ts 中导出组件
5. 在示例应用中添加使用演示

代码规范

项目使用 ESLint 和 Prettier 确保代码质量：

• 使用 TypeScript 严格模式
• 组件必须添加 PropTypes 验证
• 遵循 React Hooks 规范
• 使用 Prettier 格式化代码

构建产物

构建后会生成以下文件：

packages/components/dist/
├── index.esm.js     # ES Module 格式
├── index.cjs.js     # CommonJS 格式
└── index.d.ts       # TypeScript 声明文件

许可证

MIT