AntdFront

项目动机

使用 React 开发管理系统前端，选择 Ant Design of React（antd）做 UI 十分常见，然而与其相关的开源项目普遍存在以下问题：

大多使用 antd3，使用 antd4 的项目很多还在用 umi2
大多处于 class 组件的时代，有的部分使用了 Hook ，权限管理粒度又到不了按钮级
umi 3 并没有完成数据流的迁移 ,仍然使用 dva，与 Hook 特性配合的并不自然

为解决这些问题，我的同事，一个在前端领域深耕十数年，对技术趋势及各类框架核心思想有着精准把握，长期追求技术优雅与代码简洁的大佬出手写了一套基于 Ant Design Pro ，拥抱纯 React Hook ，实现按钮级权限，整合下一代数据流 Hox 的微前端多标签管理系统，开源并命名为 「AntdFront」。

项目于 2020 年 5 月正式开源，本来大佬不打算推广，在我的撺掇下才写了篇介绍文章，我在此基础上稍微整理、复述一下，为了能够使用推荐卡让更多人看到暂且标注原创。

先说结论，这个项目无论从学习角度还是应用角度看，都是不可多得的福利。

「GitHub 地址」：https://github.com/X-neuron/antdFront

项目作者发布原文：「这可能是你们都在找的：React 纯原生纯hook多标签微前端」

项目展示

AntdFront
注册登录、多标签、国际化、权限控制、微前端等已经全部实现，在此基础上开发管理系统应用十分方便。此外由于各类组件均为原生，执行效率、扩展性、兼容性等方面都具有巨大优势。

项目特点

该项目的突出特点一是原生，二是简洁。

React Hook、函数组件、hox数据流、极简的权限。

改写后的组件，代码简洁、易懂，易于解剖学习。动态多标签路由 Hook、权限组件、权限 Hook、微前端组件、国际化等非配置的核心代码加起来不超过500行。

正如项目作者所说，该项目适合具有强烈求知欲或教狂热的技术洁癖人群。其技术特点总结如下：

1、采用 webpack、babel、antd 等较为原生的配置和函数组件搭建，支持 pwa。
2、极简 Hox 数据流。
3、支持 json 路由动态配置。
4、页面及按钮级动态权限。
5、开发环境支持热重载。
6、提炼路由算法，实现多标签页面路由，支持组件、路由状态保存。
7、支持国际化 (react-intl-universal)。
8、支持微前端 (qiankun)。
9、代码量小，完整的开发环境，为欲接轨 React Hook 时代开发者做参考。

技术选型背后的考虑在项目作者原文中有详细说明，这里不再赘述。

我们在使用各类框架时往往容易迷失其中，盲目遵循各种约束，分不清什么是可以持续的优秀的思想，什么是有缺陷的、需要优化的做法，因此在不同框架之间的迁移成本极高。

这个项目整合了作者认为具有方向性的技术思想与实践，对理解前端发展趋势、降低学习成本有重要的指导意义。

项目结构

项目结构与 Ant Design Pro 基本保持一致。

├── package.json
├── .babelrc
├── .eslintrc.js
├── .postcss.config.js
├── webpack.config.js
├── webpack.dev.config.js
├── build                    // build文件夹
├── mock                     // mock模拟数据文件夹(mockjs) 真实生产测试环境建议使用其他库
├── public					 // 公开资源文件夹
	└── locales              // 国际化语言配置,后续可调整至/src/locales目录
└── src
    ├── components           // 组件文件夹
    ├── hooks                // 安置自定义的非全局影响的hook
    ├── config
        ├── icons.js         // 主要为了实现routes.js的图标的字符串配置。
        └── pages.js         // 主要为了实现routes.js的路由页面字符串配置。
        └── routes.js        // 可自己设计的路由配置入口。
    └── layouts              // 基础布局组件。用于全局性嵌套路由
    └── models               // 安置全局影响的hook 
        ├── useAccess.js     // 权限配置hook
        ├── useLocale.js     // 国际化hook
        ├── useLogin.js      // 登录状态控制hook
        ├── useTabRoute.js   // 管理多标签状态hook
    └── pages                // 安置业务页面
    └── services             // services API函数
    └── utils                // 一些工具
    └── app.jsx
    └── index.jsx
    └── index.html

补充说明

该项目暂用 JS 编写,保持原生性。如需在 TS 中使用，需自行定义类型。同时也欢迎 TS 版的 pull request
由于该项目常使用 ncu 管理依赖，目前less-loader 仍是5.0（因mini-css-extract-plugin)
该项目会持续关注业内最新技术，保持对parcel2，webpack5，esbuild ,babel/macros 等的实践跟踪，一旦稳定，会陆续跟进
项目依赖 nanoid 可能对 node 版本要求较高，需要 13.5以上版本，推荐使用 nvm 管理 node 版本，方便自由切换。如不喜欢，可自行替换适合自己的库

项目目前处于初期阶段，欢迎各路大神或是有兴趣、有信心的小伙伴参与其中。同时，我们也会根据后续的实际应用总结新的经验，对它进行进一步的完善。

开源精选：AntdFront —— React 纯 Hook 多标签微前端管理系统解决方案

AntdFront

项目动机

项目展示

项目特点

项目结构

补充说明

延伸阅读

React Hook

Hox

微前端

猜你喜欢