# rsbuild_react

**Repository Path**: persist0525/rsbuild_react

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-29
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Simple React App

一个基于 Rsbuild 构建的现代化 React 应用程序，集成了 Ant Design、TypeScript 和多种开发工具。

## 🚀 特性

- ⚡ **快速构建** - 基于 Rsbuild 的高性能构建工具
- 🎨 **UI 组件库** - 集成 Ant Design 5.x 组件库
- 📱 **响应式设计** - 支持多种设备和屏幕尺寸
- 🔧 **TypeScript** - 完整的类型支持
- 🎯 **路由管理** - React Router v6 单页应用路由
- 💅 **样式方案** - 支持 Less 和 Styled Components
- 🔍 **代码检查** - ESLint + TypeScript 代码质量保证
- 📦 **智能分包** - 自动代码分割和按需加载
- 🌍 **国际化** - 内置中文语言包支持
- 🛠️ **开发工具** - 代码检查器、热重载等开发体验优化

## 📋 环境要求

- Node.js >= 16.0.0
- pnpm >= 7.0.0

## 🛠️ 安装与使用

### 安装依赖

```bash
pnpm install
```

### 开发模式

启动开发服务器，支持热重载：

```bash
pnpm dev
```

应用将在 `http://localhost:3000` 启动

### 生产构建

构建生产版本：

```bash
pnpm build
```

### 构建分析

分析打包结果：

```bash
pnpm build:analyze
```

### 预览构建结果

预览生产构建：

```bash
pnpm preview
```

### 代码检查

运行 ESLint 检查：

```bash
pnpm lint
```

自动修复代码问题：

```bash
pnpm lint:fix
```

### 类型检查

运行 TypeScript 类型检查：

```bash
pnpm type-check
```

## 📁 项目结构

````
simple-react-app/
├── public/                 # 静态资源
│   ├── favicon.ico        # 网站图标
│   └── index.html         # HTML 模板
├── src/                   # 源代码
│   ├── assets/           # 静态资源文件
│   ├── components/       # 可复用组件
│   ├── pages/           # 页面组件
│   ├── utils/           # 工具函数
│   ├── App.tsx          # 主应用组件
│   ├── App.less         # 全局样式
│   └── index.tsx        # 应用入口
├── configs/              # 构建配置
│   ├── env/             # 环境变量配置
│   ├── alias.js         # 路径别名配置
│   ├── define.js        # 全局常量定义
│   ├── env.js           # 环境变量处理
│   ├── proxy.js         # 代理配置
│   └── splitChunks.js   # 代码分割配置
├── script/              # 构建脚本
│   ├── run-dev.js       # 开发服务器启动脚本
│   └── run-build.js     # 生产构建脚本
├── dist/                # 构建输出目录
├── rsbuild.config.ts    # Rsbuild 配置文件
├── tsconfig.json        # TypeScript 配置
└── package.json         # 项目依赖和脚本
```## 🔧 技术栈


### 核心框架
- **React 18** - 用户界面库
- **TypeScript** - 类型安全的 JavaScript
- **Rsbuild** - 现代化构建工具

### UI 和样式
- **Ant Design 5.x** - 企业级 UI 组件库
- **Ant Design Icons** - 图标库
- **Less** - CSS 预处理器
- **Styled Components** - CSS-in-JS 样式方案
- **PostCSS** - CSS 后处理工具

### 路由和状态
- **React Router v6** - 客户端路由
- **React DOM** - DOM 渲染

### 工具库
- **Lodash** - JavaScript 实用工具库
- **Day.js** - 轻量级日期处理库
- **Classnames** - 条件类名工具

### 开发工具
- **ESLint** - 代码检查工具
- **TypeScript ESLint** - TypeScript 代码检查
- **Code Inspector** - 代码检查器插件
- **Compression Plugin** - Gzip 压缩插件

## ⚙️ 配置说明

### 路径别名

项目配置了以下路径别名：

```typescript
{
  "@/*": ["src/*"],
  "@components/*": ["src/components/*"],
  "@pages/*": ["src/pages/*"],
  "@utils/*": ["src/utils/*"],
  "@assets/*": ["src/assets/*"],
  "@styles/*": ["src/assets/styles/*"]
}
````

### 环境变量

支持多环境配置：

- `.env` - 通用环境变量
- `.env.development` - 开发环境变量
- `.env.production` - 生产环境变量

### 浏览器支持

- **生产环境**: Chrome >= 69, Firefox >= 95, Safari 最新 2 个版本
- **开发环境**: 最新版本的 Chrome, Firefox, Safari

## 🚀 部署

构建完成后，`dist` 目录包含所有静态文件，可以部署到任何静态文件服务器。

## 📝 开发指南

### 添加新页面

1. 在 `src/pages/` 目录下创建新的页面组件
2. 在 `src/App.tsx` 中添加路由配置

### 添加新组件

1. 在 `src/components/` 目录下创建组件
2. 使用 TypeScript 定义组件 Props 类型
3. 导出组件供其他模块使用

### 样式开发

- 全局样式：修改 `src/App.less`
- 组件样式：使用 CSS Modules 或 Styled Components
- 主题定制：修改 `rsbuild.config.ts` 中的 Less 变量

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

## 📄 许可证

本项目采用 MIT 许可证。