畢業一年了，分享一下我的四個開源專案！😊😊😊
畢業一年多了，好像也一點沒有改變，依然是有在堅持開源，依然有在堅持發掘金，目前掘金也快有五千關注了：
一路走來確實不易，在掘金這個平台上應該有一些機遇的成分，平台也有推薦吧，目前來看流量還是挺不錯的，發的這些文章流量也還可以。
說到社群，公眾號這邊的流量也是挺不錯的：
如果覺得可以的可以關注一下 ~~~
接下來就來分享一下我的四個開源專案吧：
主要是前面四個，你可能會看到下面的提交記錄這麼猛，你別慌，因為我寫文章有用 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，一起進群交流、學習和成長。期待在開源的道路上和你並肩前行！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
