<h1 align="center">欢迎来到mini-anything 👋</h1> <p> <img alt="Version" src="https://yellow-cdn.veclightyear.com/ab5030c0/1b39c231-5f3e-4502-882d-e0eefef9c210.svg?cacheSeconds=2592000" /> <a href="https://sunny-117.github.io/mini-anything/" target="_blank"> <img alt="Documentation" src="https://yellow-cdn.veclightyear.com/ab5030c0/ef659111-e6a0-4716-9055-725e0ada80f2.svg" /> </a> <a href="https://opensource.org/licenses/MIT" target="_blank"> <img alt="License: MIT" src="https://yellow-cdn.veclightyear.com/ab5030c0/0131a2a5-f8af-427a-b3ce-49dcc5991e61.svg" /> </a> </p>

🚀 mini-anything 是一个集合了前端领域的各种迷你版本的库，方便前端学习者学习，探索前端源码。里面的库是原库的超级迷你版本，只包含原库的主流程，不包含边界 case，所以建议仅学习使用，请勿用于生产环境

🏠 Homepage

文档

JS 工具库

✅ mini-axios

框架

由于 Vue, React 较为复杂，mini-vue 和 mini-react 在其他仓库

✅ mini-vue3

https://github.com/sunny-117/tiny-vue

✅ mini-vue2

https://github.com/sunny-117/mini-vue2

✅ mini-react

https://github.com/sunny-117/tiny-react

✅ mini-react-hooks

✅ mini-vue-reactivity

Vue 生态

✅ mini-vue-router3

✅ mini-vuex4

✅ mini-mini-vuex3 100 行写一个 vuex

✅ mini-pinia

✅ mini-mini-pinia 40 行写一个 pinia

✅ mini-pinia-ts 最接近官方的 pinia 实现

React 生态

✅ mini-react-router4

✅ mini-react-router5

✅ mini-redux

✅ connected-react-router

✅ mini-react-redux

✅ mini-redux-promise

✅ mini-redux-thunk

✅ mini-redux-saga

工具链

✅ mini-create-react-app-template

上层框架

✅ mini-dva

✅ mini-umi

✅ mini-plugin-dva-loading

✅ mini-formily

https://github.com/Sunny-117/mini-formily

工程化

✅ mini-webpack

最接近源码的实现：https://github.com/sunny-117/jspack
简化版 mini-webpack-loader-plugins
极简版（适合新手）：https://github.com/Sunny-117/mini-webpack

✅ mini-vite

最接近源码的实现：https://github.com/Sunny-117/tiny-vite
简化版：https://github.com/Sunny-117/mini-vite

✅ mini-rollup

详见：https://github.com/Sunny-117/cherry

✅ mini-jest

迷你单元测试框架

NodeJS 生态

✅ mini-nodemon

✅ mini-express

✅ mini-koa

插件

✅ vite 插件

https://github.com/sunny-117/vite-plugins

✅ rollup plugin

https://github.com/Sunny-117/rollup-core-plugins

✅ esbuild plugin

https://github.com/Sunny-117/esbuild-book

状态管理

✅ mini-mobx

编译器

✅ parse&codegen&compiler

https://github.com/Sunny-117/tiny-complier

<h2>💼 代码仓库</h2> <table> <thead align="center"> <tr> <th>Logo</th> <th>迷你项目名称</th> <th>简述</th> <th>技术</th> </tr> </thead> <tbody align="center"> <tr> <th> <a href="#" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/37223694-82b9-4387-b128-26fad4fa0d35.png" width="50" align="center"/> </a> </th> <th> <a href="" target="_blank">mini-vue3</a> </th> <th>⚡️ Vue3 核心包: 响应性、编译、运行时</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/a4ba8dab-c85d-4a3d-afd4-887ddadac841.png" width="50" align="center"/> </a> </th> <th> <a href="" target="_blank">mini-react</a> </th> <th>🦋 React 核心包: 核心、调度、协调器</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge&logo=babel&logoColor=black" alt="badge"> </th> </tr> <tr> <th> <a href="#" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/37223694-82b9-4387-b128-26fad4fa0d35.png" width="50" align="center"/> </a> </th> <th> <a href="#" target="_blank">Vue Router3</a> </th> <th>🐝 Vue 路由版本: 3</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="#" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/37223694-82b9-4387-b128-26fad4fa0d35.png" width="50" align="center"/> </a> </th> <th> <a href="#" target="_blank">Vuex</a> </th> <th>✨ Vuex 迷你实现</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="#" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/f43fecc3-fd8e-4ffd-b99c-7a448b7ee909.svg" width="50" align="center" height="50"/> </a> </th> <th> <a href="https://github.com/sunny-117unxlsx" target="_blank">mini-pinia</a> </th> <th>🌸 Pinia - 您将喜欢使用的 Vue 存储库</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="#" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/06fe9caa-1015-4439-a74a-9ced5df57462.svg" width="50" align="center" height="50"/> </a> </th> <th> <a href="#" target="_blank">ahooks</a> </th> <th>🦄 一套高质量可靠的 React Hooks 库</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/React-20232A?style=flat-square&logo=react&logoColor=61DAFB" alt="badge"> <img src="https://img.shields.io/badge/React_Router-CA4245?style=flat-square&logo=react-router&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&logo=redux&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="https://github.com/HaiyaoTec/heimdall-ts" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/c49b0844-a78d-4b4a-af2b-6a4e92450a9e.png" width="50" alt=""/> </a> </th> <th> <a href="#" target="_blank">react-router</a> </th> <th>🏎 React 中的路由</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> </tr> <tr> <th> <a href="https://mini-spotify-rose.vercel.app/" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/51c80c75-516a-4982-bd31-933e1fe2e08a.svg" width="50" height="50" /> </a> </th> <th> <a href="#" target="_blank">Redux</a> </th> <th>🎸 JavaScript 状态容器，提供可预测化的状态管理</th> <th> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js&logoColor=white" alt="badge"> <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white" alt="badge"> </th> </tr> </tbody> </table> <a href="https://github.com/sunny-117toy-browser" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/51c80c75-516a-4982-bd31-933e1fe2e08a.svg" width="50" height="50" alt=""/> </a> </th> <th> <a href="#" target="_blank">redux-thunk</a> </th> <th>🌍 Redux的Thunk中间件^_^</th> <th> <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black" alt="badge"> <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white" alt="badge"> </th> 待续

🖥 环境支持