README.zh_CN.md

React Fresh Starter

English | 中文

这是一个持续更新的 React 项目起始模板，旨在简化启动新项目的流程。它提供了一个基础配置和最佳实践的基础，让您可以专注于构建应用程序，而无需设置基础设施。

📔 目录

• 项目简介
  • 技术栈
  • 环境变量
• 开始使用
  • 先决条件
  • 本地运行
  • 协作调试
  • 部署
• 待办

🌟 项目简介

👾 技术栈

使用的技术

• React：用于构建用户界面的 JavaScript 库
• TypeScript：JavaScript 的有类型超集
• pnpm：快速、节省磁盘空间的包管理器
• tailwindcss：实用优先的 CSS 框架
• Zustand：React 的小型、快速和可扩展的状态管理器
• React Query：用于 React 的数据获取和缓存库
• shadcn/ui：UI 组件库
• swagger-typescript-api：根据 OpenAPI 规范为任何 API 生成 TypeScript 代码
• Storybook：用于在隔离环境中构建 UI 组件和页面
• react-i18next：使用 i18next 国际化生态系统。

开发工具

• biome：Web 项目开发的一体化工具链
• vitest：由 Vite 提供支持的下一代测试框架
• react-testing-library：简单且完整的 React DOM 测试实用工具，鼓励良好的测试实践
• CommitLint：用于常规提交消息的代码检查工具
• Husky：简化 Git 钩子的工具
• Lint-Staged：对预提交文件运行代码检查工具
• knip：在 JavaScript 和 TypeScript 项目中查找未使用的文件、依赖项和导出

🔑 环境变量

参考 env 文件夹中的 .env.example 文件，并创建 .env.development 和 .env.production 文件

🧰 开始使用

‼️ 先决条件

该项目使用 pnpm 作为包管理器

 npm install --global pnpm

🏃 本地运行

克隆项目

  git clone https://github.com/wojiangkuanglong/react-fresh-starter.git

进入项目目录

  cd react-fresh-starter

安装依赖

  # node ^22.x.x，pnpm ^9.x.x
  pnpm install

启动服务

  pnpm start

或

  pnpm dev

其他命令

# 检查未使用的文件、导出和管理依赖项
pnpm knip

# 自动根据 swagger.json 生成 API，默认位置为 src/services
pnpm api

👋 协作调试

• 测试环境

  • 在 vite.config.ts 中配置服务器代理
  • 在 env 目录中基于 .env.example 创建 .env.development.local 文件，将 VITE_PROXY_TARGET 设置为后端地址。

• 生产环境

  设置 VITE_PROXY_COOKIE， 建议使用 whistle 与 Proxy SwitchyOmega 浏览器拓展.

🚩 部署

要部署此项目，请运行

  pnpm release

1. 对 'publish' 分支发起 MR（合并请求）。
2. 在成功部署并完成线上回归后，本地执行 git checkout publish 并拉取最新代码。
3. 运行 pnpm run release 自动更新 CHANGELOG 并基于提交创建标签。
4. 执行 git push --follow-tags origin publish。
5. 在 Github 上从 'publish' 向 'master' 发起 MR。

🧭 待办

• i18n
• storybook
• test