Skip to main content

制定项目规范

编码规范​

编码规范和辅助工具可以参考前一篇

下面介绍的项目规范制定主要以 react 单页面应用为例

技术栈​

  • Typescript
  • React Hook
  • Less
  • webpack

公用库​

公用库列举了一些高效可靠的第三方库，项目中需要优先考虑使用这些库，而不是其他类库，避免增加不必要的重复依赖

  • ant-design - UI 组件库
  • ahooks - 工具 hooks
  • lodash - js 工具库
  • axios - 请求库

命名规范​

  • 变量&函数命名：小驼峰 userId
  • 常量命名：大写字母下划线 USER_ID
  • 文件夹&文件命名：中划线 user-id
  • Class 命名：大驼峰 UserId
  • 组件导出命名：大驼峰 UserId
  • ts-interface：I 开头+大驼峰
  • ts-enum：E 开头+大驼峰
  • ts-type：T 开头+大驼峰

项目结构​

主要是指 src 文件夹下的目录结构。目录其实可以有多种组织方式，主要不是很难理解的目录结构都可以，讲究先入为主。以我们项目结构为例：

src
├─ assets
│  ├─ css          # 全局样式
│  ├─ icon
│  └─ image
├─ containers      # 页面组件
├─ components      # 公共组件
├─ helper          # 存放工具函数或者业务抽象函数
│  ├─ utils        # 工具函数
│  ├─ hooks        # 公共 hooks
│  └─ service.ts   # 请求函数
├─ type            # 全局类型
├─ store           # 状态管理
└─ ...

环境配置​

可以通过 cross-env 配置，当然也有其他方案，比如 dotenv 主要原理是通过执行不同的 script 命令注入指定的环境变量，然后 cross-env 会自动处理 windows 和其他 unix 系统在设置环境变量的写法上不一致的问题

调整 package.json，示例如下：

"scripts": {
    "start": "cross-env REACT_APP_NODE_ENV=dev react-app-rewired start",
    "build:test": "cross-env REACT_APP_NODE_ENV=test react-app-rewired build",
    "build": "cross-env REACT_APP_NODE_ENV=prod react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

在构建期间，process.env.REACT_APP_NODE_ENV 将替换为 REACT_APP_NODE_ENV 环境变量的当前值

主要的环境分类有：

  • 开发（DEV）
  • 测试（UAT）
  • 生产（PROD）

webpack 配置​

alias​

@ -> src

路由配置​

建议使用页面懒加载，缩减首屏时间

数据管理​

  • redux
  • mobx

各有优缺点，按需选择；不过都会有一些模板代码，可以预设相关的代码

接口调用​

  1. axios 封装基础请求函数，负责请求拦截、响应拦截、定义 baseUrl 等
  2. 请求函数，调用基础请求函数，负责配置 api url、参数转换等
  3. 业务层基于 useRequest 调用请求函数

备注​

以上这些项目规范其实都需要额外配置，详细配置和代码可以参考怎么去创建一个新的 react 项目，以及可能还有 CI 配置、dockerfile 等，建议通过定制脚手架的方式自动化配置