boyyangzai / mini-umi Goto Github PK

1. 类库开发，从0基础到掌握开源类库开发的所有知识；
2. 新人友好，手摸手教你从0开始造轮子；
3. 深入浅出，理解微内核架构、拓展无限可能；
4. 手写内核，一步一步实现umi的微内核架构；
5. 定制框架，教你搭建企业级可插拔定制框架。

        前百度、现蚂蚁体验技术部 AntV 开源团队实习生，牛客千粉博主，喜欢探索前端工程化解决方案，热爱开源，喜欢分享技术，同时也是 AntV 和 Umi 团队的 Member，

在校大学生 ，初、中级前端工程师

• 对前端开源社区中类库开发、框架开发、基础架构相关感兴趣的前端工程师
• 对前端工程化感兴趣，想要学习如何参与开源，但没有系统学习认识的在校大学生和初级前端工程师
• 一起阅读源码，和作者一起学习优秀前端工程师们的工程实践经验
• 对于Umi微内核架构感兴趣，对如何基于Umi内核拓展能力开发例如蚂蚁金服的中后台框架-Bigfish，npm包研发工具father，以及刚刚推出的dumi2 感兴趣的前端工程师

如果你现在去使用 Umi，你会发现它是一个类似于Nextjs、Remix一个样的前端框架，它有很多功能：约定式路由、SSR、MOCK数据、配置文件...

像蚂蚁金服内部的中后台前端框架Bigfish其实就是基于Umi框架封装的,类似的还有Dumi、father这两个框架

如果你对如何手写实现这样的前端框架感兴趣，这本小册你一定不能错过 上图来自 Umi 官网

如果你平时喜欢玩游戏，那你一定对MOD(模组)这个词并不陌生

通过微内核暴露出来的API，你可以自定义各式各样的模组去实现任何你想要的功能，比方说给你的游戏角色换个衣服，比方说给你的前端框架加个SSR的模式，只不过在前端领域我们把它叫做Plugin-插件

在本课程中，我分了三个大部分来系统讲述：

1.前端工程化-类库开发

系统认识如何开发好用的npm类库与框架，每一小节都配备了充足的实战项目，保证新手同学也能看得懂，学得下去，为后续手写内核和框架学习必要工程化知识

2.手写微内核架构-实现mini-core

在这一大章，你将认识微内核架构的原理与实现，并亲手实现微内核架构的各个模块，如Service、Plugin、PluginAPI、可扩展插件系统、应用元数据等

3.手写企业级中后台前端框架

这一大章你已经实现了自己的微内核架构，我们将在微内核架构的基础上，手写实现一个企业级可用的中后台前端框架-mini-umi

✅ Monorepo 最佳实践 + Turbo 远端构建缓存

npx create-mumi 项目名
npm install
npm run dev
npm run ssr // 服务端渲染模式

😚已完成：

✅ 实现内置 presets plugin 功能

✅ 实现 mini-umi 的 command 系统

✅ 实现编译时 Hook

✅ feat: 读取用户 Local Plugin

✅ 完善插件API

✅ 实现 create-mumi 脚手架

✅ 实现 userConfig 以及 modify 全流程

✅ 实现 Preset-Vue3.2 + Vite + dev build preview

✅ 实现约定式路由 支持动态路由 Vite 支持 Vue3.2 Hmr

✅ 支持对于 dev 约定式路由 的热更新

✅ 支持以 LocalPlugin 的形式 ModifyBundleConfig

✅ 支持用户配置文件自定义路由 和 更改约定式路由所在目录

✅ 可通过 npm run ssr 开启服务端渲染模式

✅ CSR SSR 支持用户自定义Layout

...

🤔More:

• 实现一套 preset-react
• 实现一套 preset-qiankun
• 实现 Father
• 实现 Dumi
• 实现一个新的应用型前端框架 - Doctor