React 工程目录结构规范

[jtwang7]

React 工程目录结构规范

背景：统一各团队目录结构规范，是实现构建，资产等自动化解析工具的基础；对齐开发方式，降低团队沟通协作成本

✅ 工程规范约定

• 工程下所有文件或文件夹命名遵循(小写 + - 连字符)
• 根路径下目录除配置文件和 src 外只能存在 bin、config、public、test配置相关目录
• 公共类库相关文件暂只支持存在 api、assets、styles、hooks、lib、store、types、constants，按需以文件或目录创建，如 style.scss 或 styles/index.scss，支持创建子目录
• pages 目录，支持 spa、mpa、mpa + spa
• spa 打包入口文件和根组件命名必须是 main.tsx、app.tsx
• 页面和组件支持可嵌套，但两者存在差异，详见下文

✅ src 下的目录结构

├── src
│   ├── api  // 后台接口服务
│   │   └── index.ts 
│   ├── assets // 公共静态资源目录
│   │   ├── fonts // 字体文件
│   │   ├── icons // icon
│   │   └── images // 图片
│   ├── styles // css样式 单独从assets拎出来是考虑到sass是需要编译处理而不像字体图标直接可使用
│   │   ├── index.scss // 默认全局样式
│   │   ├── index.module.scss // css module
│   ├── components // 公共组件
│   │   ├── component-a
│   │   │   ├── api// 服务接口
│   │   │   ├── assets // 静态资源 同上
│   │   │   ├── lib // 类库 同上
│   │   │   ├── constants // 常量 同上
│   │   │   ├── styles // 样式 同上
│   │   │   ├── types // 类型声明 同上
│   │   │   ├── components // 子组件
│   │   │   │   ├── sub-component // 结构同上
│   │   │   │   │   ├── assets
│   │   │   │   │   └── index.tsx
│   │   │   └── index.tsx // 组件入口
│   │   └── component-b
│   │       └── index.tsx
│   ├── hooks // React Hooks
│   │   └── use-hook-a // 文件夹
│   │   │   └── index.ts
│   ├── lib // 工具库 类似于utils
│   │   ├── create-store // 以文件夹 通过index入口暴露
│   │   │   └── index.ts
│   ├── store // 公共状态库
│   │   ├── index.ts
│   │   │   └── features
│   │   │   │   ├── sliceA
│   │   │   │   │   └── index.ts // the Redux logic for the feature
│   │   │   │   ├── sliceB
│   │   │   │   │   └── index.ts
│   └── types // ts类型声明
│   │   ├── index.d.ts
│   ├── pages // MPA pages下的每个文件夹都会被作为一个entry来进行打包
│   │   ├── page-a
│   │   │   ├── app.tsx // 根组件 命名固定
│   │   │   ├── main.tsx // 打包入口文件 命名固定
│   │   │   ├── assets // 结构与最外层assets一样 结构与最外层assets一样
│   │   │   ├── components // page-a下公共业务组件 结构与最外层components一样
│   │   │   ├── hooks // views公共hooks 结构与最外层hooks一样
│   │   │   ├── lib // views公共工具库 结构与最外层lib一样
│   │   │   ├── routes // 路由
│   │   │   │   └── index.ts
│   │   │   ├── store // views公共状态  结构与最外层store一样
│   │   │   ├── styles // views公共样式  结构与最外层styles一样
│   │   │   │   ├── index.scss
│   │   │   ├── constants // views公共常量 结构与最外层constants一样
│   │   │   │   └── index.ts
│   │   │   └── types // views公共st类型声明 结构与最外层types一样
│   │   │       ├── index.d.ts
│   │   │   ├── views // 页面
│   │   │   │   ├── list // 列表页 支持多层嵌套 如 list/module-a/module-b，子目录结构同外层
│   │   │   │   ├── ├── lib
│   │   │   │   ├── ├── assets // 结构与最外层assets一样
│   │   │   │   ├── ├── components // 结构与最外层components一样
│   │   │   │   ├── ├── hooks // 结构与最外层hooks一样
│   │   │   │   ├── ├── stores // 结构与最外层stores一样
│   │   │   │   ├── ├── api  // 结构与最外层api一样
│   │   │   │   ├── ├── constants // 结构与最外层constants一样
│   │   │   │   ├── ├── styles // 结构与最外层styles一样
│   │   │   │   ├── ├── types// 结构与最外层types一样
│   │   │   │   └── index.tsx
│   │   │   │   └── detail // 详情页 子目录同
│   │   │   │       └── index.tsx
│   │   └── page-b

说明：

• 只能存在api、assets、styles、components、hooks、lib、store、types文件或目录 ，可按需使用，存放的pages下公共的api，样式，组件，hooks，类库，store，类型声明
• 如果对应类型只有一个文件，可直接放置在外层，否则需要以目录收敛并通过index暴露，如styles.scss，styles/index.scss

✅ 完整项目目录结构示例

/app-demo
// 标准化工程开发规范配置文件 TODO：收敛
├── .commitlintrc.js 
├── .cz-configrc.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .yarnrc
├── .stylelintignore
├── .stylelintrc.js
├── tsconfig.json
// 环境变量配置文件
├── .env.development 
├── .env.production
├── .env.staging
├── .env.test
// 工程README
├── README.md 
// 执行文件
├── bin 
// 配置文件 构建相关
├── config 
// 依赖版本管理文件
├── package.json
└── yarn.lock
// 公共静态资源目录
├── public
// 项目主配置文件
├── rome.config.js
// 单测
├── test
├── src
│   ├── api  // 后台接口服务
│   │   └── index.ts 
│   ├── assets // 公共静态资源目录
│   │   ├── fonts // 字体文件
│   │   ├── icons // icon
│   │   └── images // 图片
│   ├── styles // css样式 单独从assets拎出来是考虑到sass是需要编译处理而不像字体图标直接可使用
│   │   ├── index.scss // 默认全局样式
│   │   ├── index.module.scss // css module
│   ├── components // 公共组件
│   │   ├── component-a
│   │   │   ├── api// 服务接口
│   │   │   ├── assets // 静态资源 同上
│   │   │   ├── lib // 类库 同上
│   │   │   ├── constants // 常量 同上
│   │   │   ├── styles // 样式 同上
│   │   │   ├── types // 类型声明 同上
│   │   │   ├── hooks // hooks 同上
│   │   │   ├── components // 子组件
│   │   │   │   ├── sub-component // 结构同上
│   │   │   │   │   ├── assets
│   │   │   │   │   └── index.tsx
│   │   │   └── index.tsx // 组件入口
│   │   └── component-b
│   │       └── index.tsx
│   ├── hooks // React Hooks
│   │   └── use-hook-a // 文件夹
│   │   │   └── index.ts
│   ├── lib // 工具库 类似于utils
│   │   ├── create-store // 以文件夹 通过index入口暴露
│   │   │   └── index.ts
│   ├── store // 公共状态库
│   │   ├── index.ts
│   │   │   └── features
│   │   │   │   ├── sliceA
│   │   │   │   │   └── index.ts // the Redux logic for the feature
│   │   │   │   ├── sliceB
│   │   │   │   │   └── index.ts
│   └── types // ts类型声明
│   │   ├── index.d.ts
│   ├── pages // MPA pages下的每个文件夹都会被作为一个entry来进行打包
│   │   ├── page-a
│   │   │   ├── app.tsx // 根组件 命名固定
│   │   │   ├── main.tsx // 打包入口文件 命名固定
│   │   │   ├── assets // 结构与最外层assets一样 结构与最外层assets一样
│   │   │   ├── components // page-a下公共业务组件 结构与最外层components一样
│   │   │   ├── hooks // views公共hooks 结构与最外层hooks一样
│   │   │   ├── lib // views公共工具库 结构与最外层lib一样
│   │   │   ├── routes // 路由
│   │   │   │   └── index.ts
│   │   │   ├── store // views公共状态  结构与最外层store一样
│   │   │   ├── styles // views公共样式  结构与最外层styles一样
│   │   │   │   ├── index.scss
│   │   │   ├── constants // views公共常量 结构与最外层constants一样
│   │   │   │   └── index.ts
│   │   │   └── types // views公共st类型声明 结构与最外层types一样
│   │   │       ├── index.d.ts
│   │   │   ├── views // 页面
│   │   │   │   ├── list // 列表页 支持多层嵌套 如 list/module-a/module-b，子目录结构同外层
│   │   │   │   ├── ├── lib
│   │   │   │   ├── ├── assets // 结构与最外层assets一样
│   │   │   │   ├── ├── components // 结构与最外层components一样
│   │   │   │   ├── ├── hooks // 结构与最外层hooks一样
│   │   │   │   ├── ├── store // 结构与最外层store一样
│   │   │   │   ├── ├── api  // 结构与最外层api一样
│   │   │   │   ├── ├── constants // 结构与最外层constants一样
│   │   │   │   ├── ├── styles // 结构与最外层styles一样
│   │   │   │   ├── ├── types// 结构与最外层types一样
│   │   │   │   └── index.tsx
│   │   │   │   └── detail // 详情页 子目录同
│   │   │   │       └── index.tsx
│   │   └── page-b

[jtwang7]

工程 README.md 规范

# 项目名称

<!-- 简略的项目描述信息-->

## 使用方法

<!-- 如果项目为静态页面，建议描述地址、页面入口等信息. eg: -->

页面地址：
- staging: 
- production: 

<!-- 如果是APP内嵌页，建议补充描述页面进入路径。有鉴权的提示鉴权方法. eg: -->
- 测试账号: peipei.gong
- 页面路径: 阿波罗APP -> 商机 -> 门店列表

<!-- 如果项目作为一个模块使用，建议使用代码描述. eg: -->

```js 
import Button from '@harbour/meishi-mrn-components

const ButtonDemo = () => (
    <Button type="primary" size="large" >按钮</Button>
)
ReactDOM.render(<ButtonDemo />, mountNode);

本地开发

环境依赖

node v10.0+ 依赖安装： yarn install

启动项目

npm run serve

构建

npm run build

备注