react-app

react项目模板，支持typescript，react 16.10，router 5.1,

目录

• 运行项目
• npm命令说明
• 目录结构
• 路径别名
• 微模块架构
• 路由
• 状态管理器
• create:module
• mock
• icon
• theme，主题控制
• 权限控制
• 国际化
• 开源工具库
• 本地工具库 src/utils
• UI框架使用规范

运行项目

node环境请升级到12+

1. 安装vscode插件

   1. Debugger for Chrome
   2. EditorConfig for VS Code
   3. ESLint
   4. Prettier - Code formatter
   5. stylelint

2. 进入根目录

3. 运行命令，安装依赖

   1. 安装项目依赖

   yarn 
   // 或者 npm i

   2. 安装mock服务依赖

   // 进入mock-server目录
   cd ./mock-server
   yarn
   // 或者 npm i

4. 在根目录下，运行命令，编译项目依赖

   yarn build:dll
   // 或者 npm run build:dll

5. 启动项目

   yarn dev
   // 或者 npm run dev

npm命令说明

1. dev 开发
2. mock 启动mock服务，如果要链接后台，那么也应该启动此服务
3. build:dll 编译项目依赖包
4. build:dev 打包开发环境包
5. build:prd 打包生产环境包
6. create:module 模块创建脚本
7. cc mock服务的控制器创建脚本，建议如下使用

    // 记得现在/mock-server下先安装好依赖
    npm run cc controller/xxx // 其中xxx是你的模块名
    // 比如
    npm run cc controller/dog
    // 即可在mock-server/src/controller文件夹下创建dog控制器，并自动注入完成。

目录结构

项目业务代码目录

• src
  • APP 项目组件入口
  • assets 静态资源
  • components 公共组件
    • base 基础组件
    • bisiness 业务组件
  • constants 静态变量
  • http 请求服务封装
  • modules 所有页面及其业务逻辑
  • routes 路由相关
  • service 服务模块
    • theme 原生主题控制服务
    • app app服务
    • i18n 国际化服务
    • user 用户服务
  • store 全局状态，公共状态
  • theme 主题配置包，包含原生主题配置(在native文件夹下)和material主题配置包
  • utils 工具包

mock服务目录

• mock-server
  • src
    • proxy 代理配置
    • controller 控制器代码，主要写mock服务

项目打包配置及脚本

• scripts
  • auto-get-module 自动获取懒加载模块脚本
  • creat_module 自动创建模块脚本及模板
  • dll 存放dll包
  • webpack webpack配置
  • build_dll.js dll打包脚本
  • build.js 项目打包脚本
  • builder.js项目打包器
  • dev.js 启动本地开发环境脚本

路径别名

1. @ => src
2. @base => src/components/base
3. @biz => src/components/bussiness
4. @history => src/routes/history
5. @channel => buildConfig/channel/${channel}

微模块架构

1. 一个模块包括业务逻辑、UI、后台交互等，这些组成一个模块，存放在一个文件夹中
2. 所有的模块都放在src/modules下，可以包含多层级
3. 模块下所有的index文件都会被脚本自动匹配到，会自动导入到状态管理器中
4. 例如你新建了一个模块名为aa-bb-cc/list, 脚本生产会将此名字转为驼峰命名，aaBbCcList, 组件和状态管理模块都叫这个名字
5. 关于业务逻辑、UI代码都可以放在同一个文件夹下，但是后台交互的service需要写在跟模块的文件夹下

// 例如
// 现在有用户管理模块 /modules/user
// 其下有
// 用户列表 /modules/user/list
// 用户详情 /modules/user/detail
// 用户新增 /modules/user/create
// 用户修改 /modules/user/update
// 等子模块
// 那么关于用户的所有service都应该放在/modules/user/sercive.ts中维护
// 而不是在每个子模块中都新建service.ts项去单独维护

路由

1. 路由配置在src/routes中,
2. 应全部都使用懒加载
3. 二级子路由也应放在此处，方便整个项目路由的统一维护

状态管理器

1. 使用的是natur方案, 文档请看natur
2. 中间件配置

// 中间件执行顺序，从上至下，按顺序执行
const store = createStore(
  modules,
  lazyModules,
  undefined,
  [
    thunkMiddleware, // action可以返回函数，接受getState，setState, getMaps, dispatch几个参数
    promiseMiddleware,// 支持异步操作
    fillObjectRestDataMiddleware, // 支持�action增量更新state
    shallowEqualMiddleware, // 支持对象浅层比较优化
    devTool, // 支持redux devtool
    filterUndefinedMiddleware, // 不处理action返回的undefined结果
    localStorageMiddleware, // 缓存到localStorage中的中间件
  ],
);

3. 多个业务模块之间存在复杂交互场景，或者单个模块的业务逻辑较为复杂，使用natur-service方案

4. 数据持久化方案使用natur-persist

create:module 创建模块脚本

建议使用此命令

1. 创建模块脚本放在/scripts/create-module中
2. 模块的模板放在/scripts/create-module/templates中，可以自行添加自己需要的模板
3. 在模板中定义的template字符串，在模块自动生成后会自动替换为模块名
4. 例如用户新建aa-bb-cc/list模块，选择了base模板，那么base模板中的所有template字符串都会被替换为aaBbCcList字符

mock

mock服务器不仅仅是mock数据，还是真正的后台接口转发器，所以不论是否需要mock数据，你都应该将它开启，mockjs已经在依赖里面，结合使用更香

1. mock服务器使用的是nestjs框架，需要先安装依赖才能运行

   cd ./mock-server
   yarn // 或者npm i

2. mock服务器，设计是部分接口可以mock，部分接口走正常后台，具体配置在mock-server/src/proxy/ 下
3. mock-server/src/proxy/api/*表示，你编写的mock api列表
4. mock-server/src/proxy/mock.ts配置你需要哪些API需要mock，以及mock总开关
5. mock-server/src/proxy/config.ts配置mock服务的请求url前缀、不走mock时的服务器地址
6. mock接口写在mock-server/src/controller中，可以结合mockjs 模拟假数据

icon

icon库查看

1. 方式一 要将官网查到的icon的驼峰命名法改为'_'分隔符命名

   import { Icon } from '@material-ui/core';
   
   <Icon>airline_seat_flat</Icon>

2. 方式二

   import AirlineSeatFlat from '@material-ui/icons/AirlineSeatFlat';
   
   <AirlineSeatFlat />

theme，主题控制

1. 基本上项目的主题都可以通过material的主题方案控制，放在/src/theme/material.ts

2. 需要原声控制的主题样式都放在theme文件夹下，然后引入到App/index.js中

3. 使用/service/theme.ts控制主题切换

   1. 创建样式文件, 定义样式变量

   /* src/theme/native/theme.scss */
   .btn {
     border-radius: borderRadius; // 随便定义一个变量
   }

   2. 给予自定义样式变量初始值

   // src/theme/native/config.ts
   export default {
     // ...其他变量
     // 你的变量
     borderRadius: '2px',
   }

   3. 使用样式

   // 使用theme的样式，和普通样式相同，
   import style from '@/theme/native/theme.scss'
   
   // style.btn,使用此样式即可

   3. 动态改变样式

   import theme from '@/service/theme';
   theme.set('borderRadius', '0px');

权限控制

1. 权限控制使用HOC实现，具体代码参考@biz/AuthFilterHOC.tsx

   // 权限判断的逻辑在/src/store/user.store.ts中
   // 支持单个权限、权限等级、角色权限三种控制方式
   import Button from '@material-ui/core';
   import AuthFilterHOC from '@biz/AuthFilterHOC';
   
   const AuthButton = AuthFilterHOC(Button);
   
   <AuthButton auth='login' authLevel={1} authRole='admin' />

国际化

1. 在@/service/i18n.ts中，有两个方法，一个是t函数，一个是useI18n方法，区别是useI18n可以监听语言配置的变化，自动刷新组件。
2. 语言包的定义都在@/constants/lang中

import React from 'react';
import {t, useI18n} from '@/service/i18n';

t('hello') // 你好 ｜ hello

const Comp: React.FC = () => {
  const $t = useI18n();
  return $t('hello');
}

开源工具库

1. 基础工具函数lodash
2. 表单校验formik
3. url工具qs
4. 对象key值转换工具convert-key
5. 计算库decimal.js
6. 时间处理库dayjs
7. 颜色处理库color
8. d3
9. rxjs

本地工具库 src/utils

1. hooks.ts，其中含有常用的hooks方法
2. regExps.ts 存放常用的正则
3. validator.ts 存放数据校验函数工具

UI框架使用规范

1. 本项目使用material ui作为主要的UI框架
2. 在使用material ui中的组件时，需要在/business/base中引入并导出，这么做的目的是隔离三方组件，以防业务需求，可以做二次封装
3. 在本项目中无法直接使用自定义的组件导入，这是由于typescript无法配置自定义的依赖路径导致

   // 错误， typescript报错
   import Button from 'Button'
   // 正确
   import Button from '@base/Button'