{"id":14989359,"url":"https://github.com/shfshanyue/mini-code","last_synced_at":"2025-04-05T23:12:04.570Z","repository":{"id":37688058,"uuid":"246835382","full_name":"shfshanyue/mini-code","owner":"shfshanyue","description":"流行框架与库的源码分析与最小实现","archived":false,"fork":false,"pushed_at":"2023-04-06T04:03:53.000Z","size":1483,"stargazers_count":402,"open_issues_count":7,"forks_count":48,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T22:09:30.208Z","etag":null,"topics":["koa","webpack"],"latest_commit_sha":null,"homepage":"https://shanyue.tech/node/koa.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shfshanyue.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"shfshanyue"}},"created_at":"2020-03-12T13:00:58.000Z","updated_at":"2025-03-28T06:51:20.000Z","dependencies_parsed_at":"2024-09-25T00:34:27.800Z","dependency_job_id":null,"html_url":"https://github.com/shfshanyue/mini-code","commit_stats":{"total_commits":43,"total_committers":3,"mean_commits":"14.333333333333334","dds":"0.046511627906976716","last_synced_commit":"34dbfef0a49984ff88cb652142a46c4252352d76"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fmini-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fmini-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fmini-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fmini-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shfshanyue","download_url":"https://codeload.github.com/shfshanyue/mini-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411239,"owners_count":20934653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["koa","webpack"],"created_at":"2024-09-24T14:18:12.314Z","updated_at":"2025-04-05T23:12:04.552Z","avatar_url":"https://github.com/shfshanyue.png","language":"JavaScript","funding_links":["https://github.com/sponsors/shfshanyue"],"categories":[],"sub_categories":[],"readme":"# 流行框架与库的源码分析与最简实现\n\n大家好，我是山月，这是我新开的一个坑：[手写源码最小实现](https://github.com/shfshanyue/mini-code)，**每一行代码都有注释**。\n\n当我们在深入学习一个框架或者库时，为了了解它的思想及设计思路，也为了更好地使用和避免无意的 Bug，源码研究是最好的方法。\n\n对于 `koa` 与 `vdom` 这种极为简单，而应用却很广泛的框架/库，莫不如是。为了验证是否已足够了解它，可以实现一个仅具备核心功能的迷你的库。正所谓，麻雀虽小，五脏俱全。\n\n对于源码，我将尽可能注释每一行代码，并以文章讲述原理与实现过程。目前已实现列表为:\n\n+ [mini-koa](https://github.com/shfshanyue/mini-code/tree/master/code/koa)\n+ [mini-http-router](https://github.com/shfshanyue/mini-code/tree/master/code/http-router)\n+ [mini-express](https://github.com/shfshanyue/mini-code/tree/master/code/express)\n+ [mini-webpack (有代码，有注释)](https://github.com/shfshanyue/mini-code/tree/master/code/bundle)\n+ [mini-html-webpack-plugin (有代码，有注释)](https://github.com/shfshanyue/mini-code/tree/master/code/html-webpack-plugin)\n+ [mini-json-loader (有代码，有注释)](https://github.com/shfshanyue/mini-code/tree/master/code/json-loader)\n+ [mini-vdom (有代码，有注释)](https://github.com/shfshanyue/mini-code/tree/master/code/vdom)\n+ [mini-native-http-server (有代码)](https://github.com/shfshanyue/mini-code/tree/master/code/native-http-server)\n+ [mini-serve (有代码)](https://github.com/shfshanyue/mini-code/tree/master/code/serve)\n\n由于目前浏览器对 ESM 已支持良好，对于客户端相关源码使用 ESM 书写，比如 vDOM、React 等。而对于服务端使用 CommonJS 书写，如 koa、express 等。\n\n## 运行与目录结构\n\n本项目采用 `monorepo` 进行维护，如果你对它不了解，可直接忽略。\n\n所有的迷你版本实现置于 `code` 文件夹，源文件置于 `index.js` 中，示例文件置于两个位置:\n\n+ `example.js`\n+ `example/`\n\n关于查看及运行示例，请使用命令 `npm run example`\n\n``` bash\n$ git clone git@github.com:shfshanyue/mini-code.git\n\n# 在 npm v7 中，会对所有 workspace 中的依赖进行安装\n$ npm i\n\n# 在 monorepo 中运行某个源码示例\n# 或者进入代码目录，再运行示例: cd code/express \u0026\u0026 npm run example\n$ npm run example -w mini-express\n```\n\n如果你对 `monorepo` 不了解:\n\n``` bash\n$ git clone git@github.com:shfshanyue/mini-code.git\n\n$ npm i\n$ cd example/express\n$ npm i\n$ npm run example\n```\n\n## 源码之前\n\n在调试了千万遍源码之后，才能对源码稍微理解，摆在这里的问题是：如何调试源码？\n\n\u003e TODO: 以前三篇文章，随后附上\n\n1. 浏览器中如何调试源码？\n1. Node 中如何调试源码？\n\n## 与我交流\n\n添加我的微信 `shanyue-bot`:\n\n+ 拉你进仓库对应的源码交流群，和 5000+ 小伙伴们一起交流源码\n+ 山月的原创文章与分享\n\n\u003cimg src=\"https://static.shanyue.tech/images/23-03-22/clipboard-5137.800093.webp\" width=\"300\"\u003e\n\n## 推荐阅读源码清单\n\n以下源码按次序，从易到难进行阅读，否则碰到大块头(比如 React)，读不下去，容易怀疑自我，从简单的开始读起，有助于培养自信心\n\n### 偏客户端\n\n+ [ms](https://github.com/vercel/ms): 时间转换器，Vercel 出品，周下载量 8000 万，几乎是 npm 下载量最高的 package 之一，从它看起，让你知道看源码/发包其实也很简单。\n+ [github markdown style](https://github.com/sindresorhus/github-markdown-css): 以为很简单，实际上很难。锻炼 CSS 的最好方法，就是给 markdown 写一个主题。\n+ [lru-cache](https://github.com/isaacs/node-lru-cache): LRU Cache，前端及服务端框架中的常用依赖。\n+ [tsdx](https://github.com/formium/tsdx): 零配置的 npm 库开发利器，与 CRA 相似，不过它主要面向库开发者而非业务开发者，了解它是如何提供零配置功能，看懂默认配置做了那些优化，并了解它的所有工具链 (prettier、eslint、size、bundleanalyzer、rollup、typescript、storybook)。\n+ [create-react-app](https://github.com/facebook/create-react-app): React 最广泛的脚手架，读懂三点。一，如何生成脚手架；二，如何实现 eject；三，了解 cra 的所有重要依赖，读懂默认 webpack 配置。\n+ webpack (runtime code): 读懂两点。一、打包 cjs/esm 后的运行时代码；二、打包有 chunk 后的运行时代码。\n+ [axios](https://github.com/axios/axios): 请求库，了解它是如何封装源码且如何实现拦截器的。\n+ [immer](https://github.com/immerjs/immer): 不可变数据，可提升做深拷贝时的性能，可应用在 React 中。\n+ [use-debounce](https://github.com/xnimorz/use-debounce): React 中的一个 debounce hook。减少 React 的渲染次数，可提升性能。\n+ [react-virtualized](https://github.com/bvaughn/react-virtualized): React 中的虚拟列表优化，可提升性能。\n+ [react-query](https://github.com/tannerlinsley/react-query): 用以请求优化的 react hooks，可提升性能。\n+ [react-router](https://github.com/remix-run/react-router): React 最受欢迎的路由库\n+ [redux/react-redux](https://github.com/reduxjs/redux): React 最受欢迎的状态库\n+ [vite](https://github.com/vitejs/vite): 秒级启动及热更行，可大幅提升开发体验。\n+ [vue3](https://github.com/vuejs/vue-next): 最难的放到最后边，读懂 vue3 的性能优化体验在哪些方面。\n+ [react](https://github.com/facebook/react): 最难的放到最后边，读懂 Fiber 及其它所提供的性能优化。\n\n### 偏服务端\n\n+ [koa](https://github.com/koajs/koa)\n+ [body-parser](https://github.com/stream-utils/raw-body): express 甚至是大部分服务端框架所依赖的用以解析 body 的库\n+ [next](https://github.com/vercel/next.js)\n+ [ws](https://github.com/websockets/ws): 了解 websocket 是如何构造 Frame 并发送数据的 (在此之前可阅读 node/http 源码)\n+ [serve-handler](https://github.com/vercel/serve-handler): 静态资源服务器\n+ [apollo-server](https://github.com/apollographql/apollo-server): GraphQL 框架，值得一看\n+ [node](https://github.com/nodejs/node): 最难的放到最后边\n\n### 其它\n\n+ ws\n+ native http server\n+ native http client\n+ lru cache\n+ trie router\n+ vdom\n+ react\n+ redux\n+ react-query\n+ use-debuounce\n+ axios\n+ vue\n+ vite\n+ dataloader\n+ mustable\n+ parser (re/js/css/md)\n+ stream pipeline (nodejs)\n+ code highlighter\n+ babel\n+ html-webpack-plugin\n+ react-dnd\n+ react-dropzone\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshfshanyue%2Fmini-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshfshanyue%2Fmini-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshfshanyue%2Fmini-code/lists"}