Moment 毕业一年多了，好像也一点没有改变，依然是有在坚持开源，依然有在坚持发掘金，目前掘金也快有五千关注了：
一路走来确实不易，在掘金这个平台上应该有一些机遇的成分，平台也有推荐吧，目前来看流量还是挺不错的，发的这些文章流量也还可以。
说到社群，公众号这边的流量也是挺不错的：
如果觉得可以的可以关注一下 ~~~
接下来就来分享一下我的四个开源项目吧：
主要是前面四个，你可能会看到下面的提交记录这么猛，你别慌，因为我写文章有用 GitHub 做图床的，所以每上传一张图片都算一次提交的。
前端脚手架
在我刚开始学习 React 的时候，使用的是 create-react-app 这个官方脚手架来创建和启动项目。但在实际开发中，当我需要扩展或自定义 Webpack 配置时，就不得不通过执行 eject 操作将内置配置完全暴露出来。然而，eject 是不可逆的，一旦执行就无法再享受脚手架带来的版本升级和优化。
为了避免 eject，我也尝试过使用一些第三方工具，例如 react-app-rewired 和 customize-cra，通过它们可以在不执行 eject 的情况下修改配置。但问题在于，这些工具与不同版本的 create-react-app 或 React 之间存在兼容性问题。尤其是 customize-cra，在不同 Node 或 React 版本中常常出现兼容性错误，让我耗费了大量时间去排查和解决。
正是这些折腾的经历，让我萌生了自己实现一个更灵活、更可控的脚手架工具的想法。
目前采用的方案就是在 create-react-app 的基础上支持直接读取项目根目录的 Webpack 配置，如果要支持 Vue 的方式，那么我完全可以像 Vite 那样，抽离 Vue 和 React 公共的 Webpack 配置通过插件的方式来引入，这种通过插件的方式来扩展不同的框架。
例如这些配置与你是用 Vue、React 还是其他库无关，是构建一个现代前端应用所共有的：
-
入口 (Entry)
-
输出 (Output)
-
模块处理 (Module - Rules for non-JS)
-
插件：很多插件是框架无关的，例如 HtmlWebpackPlugin、MiniCssExtractPlugin、DefinePlugin、CopyWebpackPlugin、ESLintWebpackPlugin / ForkTsCheckerWebpackPlugin 等
-
开发服务器 (DevServer)
等等
对于另外一些和框架紧密相关的，我们就需要来单独处理并由各自的插件来提供和覆盖公共配置：
- 热更新 (HMR)：虽然
devServer.hot = true是公共的，但针对不同框架的 HMR 支持可能需要特定的loader或babel插件（如react-refresh所需的react-refresh/babel和ReactRefreshWebpackPlugin）。这部分应由框架插件来配置。
如果你对这个项目感兴趣，可以查看 Github 地址。
如果你想学习整个项目是如何设计并最终如何发版的，你可以参与我写的这个课程：
在线代码编辑器
在线代码编辑器主要是因为之前想到找实习，只有一个脚手架的项目还不够用，于是便有了写这个在线代码编辑器的想法。
这个项目一开始使用的是 React 的，后面又用了 NextJs 进行重构了一遍，那会也想着 NextJS 会对远程比较友好，但是事实证明也确实如此。结合社群的上的一些成员来一起花了两三个月完成了一个最终的版本了。
本项目基于 Next.js + React 搭建，前端界面采用 Radix UI 与 TailwindCSS 打造出高度可定制且无障碍的交互体验，同时配合 Framer Motion 实现流畅动画效果。代码编辑核心使用 Monaco Editor，结合 Shiki 提供高质量语法高亮，并通过 Yjs 与 y-websocket 实现多人实时协作编辑。
在功能扩展上，项目集成了 xterm.js 及其插件，支持浏览器内嵌终端，同时借助 WebContainer API 让用户能直接在浏览器运行代码。界面交互层面，利用 dnd-kit 实现拖拽排序，react-window 与 react-virtualized-auto-sizer 优化了大规模内容的渲染性能。
此外，项目还使用 localforage 进行持久化存储，jszip 提供压缩与解压支持，uuid 管理唯一标识；同时集成了 Giscus 评论系统、二维码生成工具等，为整体体验提供了完善的辅助功能。
项目开源在 GitHub，如果觉得有用，欢迎 Star 收藏。
AI 开发工具
create-ai-toolkit 是一个由人工智能驱动的前端开发工具，旨在通过自动化和智能化的方式显著提升开发效率。该工具集成了组件和 hooks 生成、提交信息自动化以及代码审查等功能，帮助开发者在保持高代码质量的同时，简化和加速开发流程。
这个项目在之前 AI 编辑器还没有出现的时候如果愿意用 key 还是能有点用的，但是现在就根本没啥用了。
之前有朋友说到，你那会都在写这些编辑器了，结合一下做一个这样的编辑器出来说不定就发了。
目前根据 git 的暂存区的修改来做生成 commit 信息，目前应该 cursor 这类的编辑器都能实现了，目前这项目都没啥用了。
协同文档 DocFlow
目前主要在推的是 DocFlow，它的一个基于 Tiptap 和 Next.js 构建的现代化协同文档编辑器，集成了丰富的编辑能力与多人实时协作功能，支持插件扩展、主题切换与持久化存储。适合团队写作、教育笔记、在线文档平台等场景。
这里我现在就不再做介绍了，晚点我会写一篇文章详细介绍。目前这些技术栈都是采用最新的，包括 Tiptap 都是使用 3 版本的：
| 技术 | 说明 |
|---|---|
| Next.js | 构建基础框架，支持 SSR / SSG |
| Tiptap | 富文本编辑器，基于 ProseMirror |
| Yjs | 协同编辑核心，CRDT 数据结构 |
| @hocuspocus | Yjs 的服务端与客户端 Provider |
| React 19 | UI 框架，支持 Suspense 等新特性 |
| Tailwind CSS | 原子化 CSS，集成动画、表单样式等 |
| Socket.io | 协同通信通道 |
| Prettier/ESLint | 代码风格统一 |
| Vitest/Playwright | 单元测试与端到端测试支持 |
下面是一些页面的截图：
具体可以去 DocFlow 里面去体验，目前线上只支持邮箱登录，为了方便我开发，Github 登录目前只实现了本地的 URL 跳转，如果你在线上使用 Github 登录，你会看到它跳转的路径是跳转到本地的。
这个项目目前是在准备接入组织的功能，跟飞书那样，能聊天什么之类的，再下一个计划是接入 RAG。
如果你对这个项目感兴趣，欢迎点个 ⭐ 支持 👉 GitHub 地址。如果你想参与贡献，也非常欢迎联系我。
总结
开源最大的好处就是它为所有人提供了一个公平的舞台，不论学历高低，只要你愿意投入时间和精力，就能通过代码贡献获得认可。很多时候，一份真实可见的开源作品，比一纸学历更能体现一个人的实力和价值。参与开源还能让你快速学习，接触到行业里最前沿的技术和最佳实践。你写的每一次提交、修复的每一个 bug、参与的每一次讨论，都会成为你成长的印记。与此同时，你还能结识来自全球的开发者，拓展人脉，积累经验。对于学历不突出的人来说，开源是一条非常好的“逆袭”路径，它能让你的能力被真实地看到。很多公司在招聘时也很看重开源经历，它甚至可能直接帮你打开职场的第一扇门。
例如我之前发的沸点：
如果你也对开源感兴趣，欢迎加我微信 yunmz777，一起进群交流、学习和成长。期待在开源的道路上和你并肩前行！
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)