前端react项目目录详解

发布于：2025-07-17 ⋅ 阅读:(19) ⋅ 点赞:(0)

1. 项目根目录文件

文件/目录	作用
`package.json`	定义项目依赖、脚本命令（如 `start`/`build`）、版本信息等
`.env`	基础环境变量配置（所有环境共享）
`.env.development`	开发环境专用变量（如本地API地址）
`.env.production`	生产环境专用变量（如线上API地址）
`.gitignore`	指定Git版本控制忽略的文件（如 `node_modules`、`.env.local`）
`.npmrc`	NPM配置（如镜像源、私有仓库认证）
`Dockerfile`	Docker镜像构建配置，用于容器化部署
`README.md`	项目说明文档（部署步骤、开发规范等）
`commitlint.config.js`	Git提交信息格式校验规则（配合工具如 `husky`使用）
`sonar-project.properties`	SonarQube代码质量扫描配置

2. 构建与部署相关

文件/目录	作用
*`build-and-push-docker-to-.sh`**	自动化构建并推送Docker镜像到不同环境（test/uat/prod）的Shell脚本
`config-overrides.js`	覆盖Create React App默认配置（如Webpack定制）

3. 源代码目录 (`src/`)

(1) 核心功能模块

目录/文件	作用
`actions/`	Redux的Action定义（触发状态更新的行为）
`reducers/`	Redux的Reducer函数（处理状态变更逻辑）
`components/`	可复用的UI组件（如按钮、表单控件等）
`pages/`	页面级组件（与路由一一对应）
`router/`	路由配置（定义页面导航结构）
`Interface/`	TypeScript接口定义（API响应/组件Props的类型）
`constants/`	常量定义（如API端点、Redux Action类型）
`util/`	工具函数（日期格式化、请求封装等）
`datas/`	模拟数据或静态数据（用于开发阶段）

(2) 国际化与本地化

目录/文件	作用
`locale/`	多语言资源文件（如 `zh-CN.json`、`en-US.json`）

(3) 第三方集成

目录/文件	作用
`gio/`	可能是GrowingIO（用户行为分析工具）的集成代码
`.sentryclirc`	Sentry（错误监控平台）的配置文件

(4) 入口文件

文件	作用
`index.tsx`	React应用入口（渲染根组件、挂载DOM）
`registerServiceWorker.ts`	PWA支持（离线缓存、后台同步）
`setupProxy.js`	开发环境API代理配置（解决跨域问题）
`singleSpaEntry.js`	微前端入口（如果项目作为微前端子应用）

(5) 资源与样式

目录/文件	作用
`assets/`	静态资源（图片、字体、图标等）
`logo.svg`	项目Logo文件
`images.d.ts`	TypeScript声明文件（解决图片导入的类型问题）

4. 其他目录

目录/文件	作用
`public/`	静态资源（HTML模板、favicon等，不经过Webpack处理）
`node_modules/`	项目依赖的第三方库（自动生成，通常不上传Git）
`@types/`	自定义TypeScript类型声明（补充第三方库的类型定义）
`etc/`	杂项配置（可能是自定义脚本或临时文件）