搭个中后盾零碎的脚手架

  • 仓库地址 https://github.com/percy507/v...

  • 搭建脚手架目标

    • 学习 vite、recoil 等新技术
    • 封装我的项目中罕用的较简单的组件
    • 学习肯定的前端架构能力

构建命令

npm 与 yarn 对新版 husky（v7.0.1+）的配置形式不太雷同，咱们这里只应用 npm

https://typicode.github.io/hu...

npm i -d              # 装依赖npm run dev           # 本地开发npm run build:dev     # 开发服务器生产环境打包npm run build:test    # 测试服务器生产环境打包npm run build:prod    # 生产服务器生产环境打包npm run preview       # 本地打包并预览打包后的页面npm run deploy        # 将打包后的代码推送到github近程仓库，以便预览# deploy 这里应用了 gh-pages依赖# 因为 github pages 的局限性，我的项目里只能应用 HashRouter，理论我的项目可替换为 BrowserRouter

外围依赖

# 次要应用到的依赖Vite          v2.1.0+           一种新型前端构建工具React         v17.0.0+          前端框架recoil        v0.4.0            React 状态治理库antd          v4.16.10+         React UI 组件库Typescript    v4.2.1+           为JavaScript提供弱小的类型零碎

留神: recoil v0.4.0 还不是稳定版，审慎用于生产环境

When Recoil is going to stop being experimental?

# 部署打包后的代码至 github Pagesgh-pages# 代码提交、校验、格式化的相干工具husky         v7.0.1+           一款简化应用git hook的工具lint-staged   v11.1.2+          为git暂存区文件执行指定的校验程序Eslint        v7.22.0+          校验js、jsx、ts、tsx代码Prettier      v2.2.1+           格式化代码stylelint     v13.13.1+         校验css、less代码commitlint    v13.1.0+          校验commit信息# commitlint@commitlint/cli                           提供commitlint命令校验提交信息标准@commitlint/config-conventional           提供commit信息规定# eslint插件eslint-plugin-react                       提供一些用于校验react代码的规定eslint-plugin-simple-import-sort          eslint插件，用于主动对import、export语句以肯定的规定排序@typescript-eslint/parser                 一种eslint解析器，用于反对eslint解析typescript@typescript-eslint/eslint-plugin          提供一些用于校验typescript代码的规定eslint-config-prettier                    禁用非必要的以及与prettier有抵触的规定# stylelint插件stylelint-config-standard                 提供一些罕用的CSS编写规定stylelint-order                           强制依照某个程序编写cssstylelint-config-rational-order           提供一种css编写程序的规定stylelint-config-prettier                 禁用非必要的以及与prettier有抵触的规定

组件

  • 外围组件

    • MenuList: 菜单组件。用于渲染顶部菜单与侧边栏菜单的配置化数据
    • Authorized: 权限组件。同时暴露出一个 hasPermission 函数用于逻辑上的权限判断
    • ErrorBoundary: 谬误边界组件。用来在子组件树渲染报错后，降级显示谬误 UI
    • Exception: 异样页通用组件。比方 404 页面、403 页面、500 页面等
    • IconFont: 自定义图标组件。图标数据从 iconfont.cn 获取
    • PageWrapper: 通用页面包裹层组件。
    • RouteList: 路由组件。用于渲染路由的配置化数据

  • 自定义业务组件

    • IframeComponent: iframe 组件。用来渲染 html 字符串
    • QuillEditor: 富文本编辑器

hooks

  • useMenuStatus: 获取以后侧边栏菜单默认被关上、选中的菜单项

架构设计

目录设计
.config         # 存储husky以及各种linter的配置文件.vscode         # vscode当前工作空间配置目录src  @types        # 存储可用于全局的类型申明文件  assets        # 动态资源目录  components    # 组件目录  hooks         # 自定义hooks目录  layouts       # 存储页面布局  pages         # 存储具体页面  recoil        # 按模块存储recoil状态文件  services      # 存储调接口的文件  styles        # 存储一些全局的款式或变量  utils         # 存储工具函数

为了抽离我的项目根目录下各种 linter 的配置文件，才创立.config 目录

linter 配置文件被应用的两种形式:

  • vscode相干插件调用: .vscode/settings.json
  • npm依赖调用: package.json 中的 scripts 字段下的某个命令以及 lint-staged 字段
路由、权限命名设计
# 路由命名设计# 如果有多个layout，则layout为第一个path/layout/first-menu/[second-menu]/other/布局名称/一级菜单/二级菜单(可能没有)/其余子门路
# 权限命名格局布局名称__[一级菜单]__[二级菜单]__[其余]# 权限管制（前端）菜单、路由、页面按钮或子模块封装权限组件、权限判断函数# 权限管制（后端）接口权限管制接口外面某些字段的权限管制（数据权限管制）
# 如果要侧边栏或顶部菜单、权限配置化，存后端可参考 https://github.com/javaLuo/react-admin
打包代码的注意事项
css（预处理器、css modules）服务器生产环境辨别(dev,test,prod)公共代码抽离基于路由进行代码拆分