毕业一年了,分享一下我的四个开源项目!😊😊😊

毕业一年多了,好像也一点没有改变,依然是有在坚持开源,依然有在坚持发掘金,目前掘金也快有五千关注了:

一路走来确实不易,在掘金这个平台上应该有一些机遇的成分,平台也有推荐吧,目前来看流量还是挺不错的,发的这些文章流量也还可以。

说到社群,公众号这边的流量也是挺不错的:

如果觉得可以的可以关注一下~~~

接下来就来分享一下我的四个开源项目吧:

主要是前面四个,你可能会看到下面的提交记录这么猛,你别慌,因为我写文章有用 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 还是其他库无关,是构建一个现代前端应用所共有的:

  1. 入口 (Entry)

  2. 输出 (Output)

  3. 模块处理 (Module - Rules for non-JS)

  4. 插件:很多插件是框架无关的,例如 HtmlWebpackPlugin、MiniCssExtractPlugin、DefinePlugin、CopyWebpackPlugin、ESLintWebpackPlugin / ForkTsCheckerWebpackPlugin 等

  5. 开发服务器 (DevServer)

等等

对于另外一些和框架紧密相关的,我们就需要来单独处理并由各自的插件来提供和覆盖公共配置:

  1. 热更新 (HMR):虽然 devServer.hot = true 是公共的,但针对不同框架的 HMR 支持可能需要特定的 loaderbabel 插件(如 react-refresh 所需的 react-refresh/babelReactRefreshWebpackPlugin)。这部分应由框架插件来配置。

如果你对这个项目感兴趣,可以查看 Github 地址。

如果你想学习整个项目是如何设计并最终如何发版的,你可以参与我写的这个课程:

在线代码编辑器

在线代码编辑器主要是因为之前想到找实习,只有一个脚手架的项目还不够用,于是便有了写这个在线代码编辑器的想法。

这个项目一开始使用的是 React 的,后面又用了 NextJs 进行重构了一遍,那会也想着 NextJS 会对远程比较友好,但是事实证明也确实如此。结合社群的上的一些成员来一起花了两三个月完成了一个最终的版本了。

接下来我就和大家分享一下他的一些功能,以便大家对这个项目有一个全面的了解:

首页

首页的话就一个流星的动画,加上后面的内容,整体还算协调。

控制面板

点击控制面板之后会进入到 dashboard,如果没有登录的话会跳转到登录页面:

这里不需要额外注册,直接获取验证码,没有账号的话会直接注册一个新的。

进入到控制面板,这里我们可以选择创建项目或者创建一个协同文档:

在这里提供了多种不同的框架来进行初始化,除了使用原有的模板之外,我们也可以直接导入本地的代码来进行开发和编辑:

这里有个头像还挺好看的,我很喜欢:

代码编辑

点击创建之后我们会进入到这样的一个页面,首先左边是一个文件栏,整体布局跟 vscode 一样,下面的是控制台,在这里我们可以直接执行 npm 和 pnpm 的一些命令,还有一些 NodeJs 的命令,

现在我们就是给这个项目执行 pnpm 来安装了相关的依赖包,并执行了 pnpm dev 来把这些项目启动了起来:

文件搜索

除了文件树之外,我们还提供了跟 Vscode 差不多的功能,文件搜索:

还可以分屏编写:

切换编辑器主题

在这里我们还可以切换编辑器的主题,在这里提供了多个主题可以选择:

协同编辑

这回我们要回到了我们的核心功能:协同编辑上了,首先要到 dashboard 控制面板上创建一个文档:

创建完成之后你会看到这样的效果:

点击分享文档,可以分享该文档给其他的朋友来一起编辑:

最终协同编辑的效果:

协同如何实现的?

关于协同编辑这块,就来分享一下这前后端所涉及到的技术栈吧

  1. 前端

    1. y-monaco: 将 Yjs 的实时协作功能与 Monaco Editor 集成,提供了默认的协同编辑数据同步与协同 ui 效果.

    2. y-websocket: Yjs 的 WebSocket 适配器,提供实时数据同步功能,允许多个客户端通过 WebSocket 进行协作编辑。

    3. yjs: 高性能的 CRDT 框架,支持实时协作和离线编辑,通过共享类型自动合并变更处理冲突,适用于大型文档和无限用户的场景。

    4. perfect-cursors: 提供平滑的鼠标移动效果.

  2. 后端

    1. y-websocket:yjs 封装了协同逻辑

    2. y-mongodb-provider:持久化存储

可以帮你润色成几种不同风格,你看喜欢哪种:

项目开源在 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,一起进群交流、学习和成长。期待在开源的道路上和你并肩前行!

相关推荐
胡gh3 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
ningqw3 小时前
SpringBoot 常用跨域处理方案
java·后端·springboot
你的人类朋友3 小时前
vi编辑器命令常用操作整理(持续更新)
后端
胡gh3 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴3 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_4 小时前
TailWind CSS
前端·css·postcss
一只叫煤球的猫4 小时前
看到同事设计的表结构我人麻了!聊聊怎么更好去设计数据库表
后端·mysql·面试
uzong4 小时前
技术人如何对客做好沟通(上篇)
后端
烛阴4 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧4 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python