【Web】前端项目模版，Web 端的业务项目可以基于此模版快速搭建。
ngiq-frontend-template-web
├── .github
│ ├── workflows # 存放 GitHub Actions 的工作流程文件。如：代码校验、构建、部署、发布等。
│ └── ...
├── .husky # 存放 git hooks
│ ├── commit-msg # git commit 时触发
│ ├── pre-commit # git commit 前触发
├── config # vite 构建配置
│ ├── rollup.build.config.ts # rollup 配置文件
│ ├── vite.base.config.ts # vite 基础配置文件
│ ├── vite.dev.config.ts # vite 开发环境配置文件
│ └── vite.prod.config.ts # vite 生产环境配置文件
├── env # vite 项目环境变量
├── public # 公共静态资源文件目录
│ └── vite.svg
├── scripts # 存储项目CI、npm hooks、上传等脚本
├── .editorconfig # 编辑器风格配置文件
├── .eslintignore # eslint 忽略校验配置文件
├── .eslintrc # eslint 校验配置文件
├── .gitignore # git 忽略上传配置文件
├── .npmrc # npm 配置文件
├── .prettierignore # prettier 忽略配置文件
├── .stylelintignore # stylelint 忽略配置文件
├── CHANGELOG.md # 项目 changelog（可配置相关插件，根据 git commit 自动生成）
├── commitlint.config.cjs # git 提交规范配置文件
├── index.html
├── jest.config.ts # jest 配置文件
├── lint-staged.config.cjs # git lint-staged 规则配置文件
├── package.json
├── prettier.config.cjs # prettier 代码格式化配置文件
├── README.md
├── stylelint.config.cjs # stylelint 代码格式化配置文件
├── tsconfig.base.json # tsconfig 基础配置文件
├── tsconfig.json
├── tsconfig.node.json
└── src
├── assets # 项目静态资源文件目录
│ ├── fonts
│ ├── images
│ └── svgs
├── components # 项目通用的组件
│ ├── error-boundary
│ ├── inspector
│ └── ...
├── constants # 存放项目中的全局变量、常量
├── hooks # 自定义 hooks
├── pages # 页面目录
│ ├── 404
│ ├── home
│ ├── login
│ └── ...
├── routes # 路由表，支持配置式路由
├── services # 后端接口相关
│ ├── api
│ └── ...
├── store # 全局 store 目录
│ ├── models # 数据 model 目录（global model + 按页面划分的 model）
│ └── index.ts
├── styles # 样式目录：存放全局样式、主题色、mixins
├── types # 存放 TS 类型声明文件
├── utils # 工具函数
│ ├── index.ts
│ ├── generate-id.ts
│ ├── generate-random-string.ts
│ └── variable-type-detection.ts
├── vite-env.d.ts # vite 环境变量声明文件
├── main.tsx # 项目入口文件
├── App.tsx # 项目根容器组件
├── App.less
└── index.lessnode >= 14.18npm >= 6.14.15
| 特性 | 描述 |
|---|---|
| 包管理 | Npm |
| 编写语言 | React、TypeScript |
| UI | Antd V4.x |
| 编译&构建 | Vite、Rollup |
| 代码风格统一 | Editorconfig、ESLint、Prettier、Stylelint |
| 工作流 | commitlint、husky、lint-staged |
| 图标管理 | iconfont |
| 效率工具 | react-dev-inspector |
| 国际化 | react-intl |
| 状态管理 | rematch、redux |
| 接口管理 | OpenAPI |
| 配置式路由 | react-router V6 |
| 质量控制 | Jest |
| 主题切换 | - |
| 前端监控 | - |
| CI/CD | - |
| npm包 | 版本 | 作用 |
|---|---|---|
| react | "16.14.0" | |
| react-dom | "16.14.0" | |
| react-router | "~6.10.0" | |
| react-router-dom | "~6.10.0" | |
| react-intl | "^6.0.5" | 国际化 |
| react-beautiful-dnd | "^13.1.0" | 组件拖拽 |
| react-resizable | "^3.0.4" | 元素拖拽放大/缩小 |
| react-redux | "~8.0.5" | 连接组件和store |
| @rematch/core | "~2.2.0" | 状态管理 |
| ahooks | "~3.7.6" | 通用自定义 hooks |
| antd | "~4.24.8" | 组件库 |
| axios | "~1.3.5" | 请求库 |
| dayjs | "~1.11.7"" | 时间处理工具库 |
| immer | "~9.0.21" | 不可变数据流 |
| lodash-es | "~4.17.21" | esm 版工具库 |
| normalize.css | "~8.0.1" | 重置浏览器默认样式 |
| qs | "~6.11.1" | A querystring parsing and stringifying library with some added security. |
| typescript | "~4.9.3" | |
| less | "~4.1.3" | css 预处理器 |
| postcss-preset-env | "~8.3.2" | css 代码兼容处理 |
| vite | "~4.2.0" | 构建工具 |
| vite-plugin-importer | "~0.2.5" | 按需加载 |
| react-dev-inspector | "~1.8.4" | 效率工具：支持【开发环境】点击页面元素直接跳转到源码 |
参考项目开发规范
参考项目发布规范
| Commit 类型 | 类型描述 |
|---|---|
/^#KYY-\d\s.+/ |
自定义的 commit 类型，如：'#KYY-123 fix bug' |
/^#LFY-\d\s.+/ |
自定义的 commit 类型，如：'#LFY-123 fix bug' |
| feat | 新特性/功能 |
| fix | 修复 bug |
| docs | 修改文档 |
| style | 代码格式化（不影响代码运行的变动） |
| refactor | 重构（即不是新增功能，也不是修复 bug 的代码改动） |
| perf | 性能优化（提高性能的代码改动） |
| test | 测试文件改动 |
| build | 构建配置改动（如：vite.config.ts） |
| ci | CI/CD 配置或者 scripts 脚本改动 |
| chore | 其他改动（如：不修改 src 目录下的文件内容或测试文件的改动） |
| revert | 撤销某次 commit |
原文
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
译文
<类型>[可选 范围]: <描述>
[可选 正文]
[可选 脚注]- 使用
less + css：*.module.less/*.module.css文件支持模块化 - 尽量使用
ahooks，不要自己封装一些常见的、自定义hooks - 尽量使用
react hooks实现react组件 - 页面维度的数据存放到页面级别的
model，只有所有页面共用的数据才存放到global model env环境变量：以PUBLIC_开头的环境变量会通过import.meta.env暴露在你的客户端源码中。所以敏感信息不要以PUBLIC_为前缀。- 配置式路由：
- 项目路由统一在
routes目录下配置 - 页面级别路由建议使用动态加载
- 路由组件统一使用
export default xxx的形式导出，否则路由无法渲染出来
- 项目路由统一在
rematch使用：- hooks 函数组件中使用
- class 类组件中使用
- 函数组件不需要再用
connect订阅store中的状态 - 项目中通过 immer 实现不可变数据流
- 浏览器兼容性
- public目录使用说明
- 环境变量使用说明
index.html与项目根目录 =>index.html必须放在项目根目录下- package.json 中设置了
"type": "module"，表示当前项目使用ES Modules（ESM）模块系统，即在ESM中，需要使用import和export关键字来导入/导出模块，不能再用require/module.exports。 git commit前，可以通过执行npm run commit，选择对应的提交类型
- 支持主题色切换
- 支持前端监控
- 新增通用场景的页面（如：登录页、关于我们页等等），业务项目只需要稍微修改下，就能快速开发完成
- 自动生成 changelog
- 更新
Vite至最新版本