# React-Common-Template

**Repository Path**: weiyueshiyi/react-common-template

## Basic Information

- **Project Name**: React-Common-Template
- **Description**: 技术架构:React v18 + router v6 + webpack v5 + antd v4 + Less

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-11-30
- **Last Updated**: 2023-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux, webpack, Ant-Design, Less

## README

## 文件目录说明
  > app 存放 React 的业务代码。

  > assets 公共静态资源文件

  > components 存放业务相关或非业务相关的公共组件

  > pages 存放业务相关的 React 代码

  > router 路由入口文件

  > style 全局样式

  > utils 工具类 / 方法集合

  > store Redux 的入口文件，各个业务的 store.js 创建完成之后，会自动引入 app/store.js，当前模块的文件夹名称作为 key（大写会转成小写）。在全局注入当前业务的 store,

  > public/index.html 单页面的静态入口文件，webpack 会基于此文件构建 index.html，是 HtmlWebpackPlugin 插件的模板文件
## 技术架构
React v18 + Redux v8 + router v6 + webpack v5 + >antd v4.20/ant-designPro + Less + Lint工具集
## 浏览器

最低支持 IE 11,chrome 35。

## 开发

`npm i` 安装依赖包 | `npm i -f` 强制安装依赖包

`npm start` 本地开发调试

`npm run build` 本地 / 线上编译，生成静态的 html 页面（dist 目录）

## 开发规范

- /app 前端代码

- /app/store为Redux的入口文件,在utils/buildRouter做了文件处理,无需在store中逐个引用。各模块所属的store.js创建完成后会自动引入 app/store.js中,当前文件夹名为 Key。具体使用方法参考DemoRedux

- 行内样式不可超过两个。页面级别样式尽量使用模块化。如有特殊情况或组件内样式可酌情选择

- 单个页面/组件文件，代码量控制在 350 行左右，超过该数目，请适当对业务内容进行拆分。(注：条件不允许的情况下，不必为了封装而封装)

- 由于多人协作开发，项目中配置了Lint工具,请按照规范开发。除极个别情况，不可以在业务代码中使用 `eslint-disable` 的方式跳过 `eslint` 校验规则。

- 全局业务组件归置于app/components下,局部组件归置于当期文件夹下/components下,组件尾单词以业务/UI 组件名称命名,如：Module,Table等

- 如有公共请求放到 app/api下.单模块请求则在该模块下新建api.js文件

## 注意事项
- master 分支已受保护,在部署正式环境前不允许操作.部署测试环境与拉取代码在develop分支中进行.个人新建分支命名为feature_xxx

- 调试须知:由于.less文件使用module方式命名,控制台样式类名显示为哈希值

- 每个主文件夹下有相对应的目录文件功能说明,新文件产生需及时标记

- 由于React v18 版本新特性,useEffect初始化会执行两次,如开启了严格模式则需用return清除副作用.具体操作请参考官方文档

- app/DemoRedux示例文件,无特殊情况不采用redux

## 更新日志
  > 采用webpack5对进行项目搭建,区分环境合并配置
  > 优化配置提高构建速度。开发环境下@pmmmwh/react-refresh-webpack-plugin模块热更新且保持 组件状态
  > babel.config.js中使用react-refresh（配合上条）
  > babel.config.js 增加 modules：false（production 环境 开启 tree shaking）
  > 新增jsconfig.json文件,webpack新增resolve,支持 @ 引用文件
  > 增加 webpackbar （开发环境编译进度条）
  > DefinePlugin自定义区分环境变量
  > Router V5升级至V6.优化左侧菜单
  > 应用global.less,应用全局滚动条样式
  > 封装Echarts组件
  > devServer关闭gzip压缩，开启historyApiFallback,防止404问题
  > 开启严格模式
  > less文件采用module方式命名,避免样式污染
  > 封装axios并集中处理响应结果
  > 配置lint工具集,针对多人开发进行规范限制
  > 新增redux,在utils/buildRouter进行优化处理
  > app/store.js 生成 store 的逻辑修改
  > 增加 cache-loader （缓存 css-loader 的编译结果）
  > 针对css-loader与less-loader进行修改,修复antd/antd-pro引入报错问题
  > 新增 portfinder，friendly-errors-webpack-plugin：端口重复自动分配可用端口
  > 去除自定义封装搜索功能Form组件<PageForm />,替换为多功能的ant-pro-components,由于代码量较少，无需进行封装,需要的页面引入即可。官网地址：https://procomponents.ant.design/components 
  > 新增copy-webpack-plugin插件,项目中某些文件在打包的时候复制一份到打包后的文件夹中
  > 修改request.js请求拦截配置，支持多种content-type.使用时需要在封装的api.js请求文件中加入needFormdata:true
  > 新增全局Loading。删除router/index.js文件。更改路由表结构。App.js中新增前置路由守卫
  > 更改开发环境下的devtool,提升编译及响应速度