使用打补丁的方式修改第三方仓库代码

pnpm 打补丁

打补丁这个操作是前端同学所必须要掌握的一个技能。核心是通过打补丁的方式,修改一个第三方库的代码。

为什么需要打补丁

我们在项目开发中是必不可少的会使用第三方库的,第三方库一般情况下是非常之严谨的,但是我们只要在对应的仓库下,还是可以看到有非常多的 issue 的,其中不乏是有提一些 bug 的 issue。

所以第三方库也是会有 bug 的,或者考虑不周的地方,这是常态,毕竟真正的开发环境一定是比作者在思考和构件库时想到的场景要复杂的。

出现了 bug 怎么办

如果我们使用的一个库,有 bug,或者有需要优化的地方,我们该怎么办?大致无非是以下这几种解决方式:

  • 换一个库

    换一个,当然这个不一定能满足,有时候替换的还没有原来的好用

  • 提 issue,让作者更改

    这个是非常常规的方式,但是作者可能并不会立刻帮忙解决,而我们开发时工期一般都紧急,所以是没办法等的

  • 自己帮作者改,提 Pr

    如上,作者可能没有办法第一时间合并你的 pr

  • 打补丁

    这个就是我们今天要讲的核心,使用补丁的方式我们就可以非常完美的解决这个问题,不需要等待作者的审核和回应,我们直接本地的修改,只在我们项目中生效。

使用 pnpm 打补丁

目前很多时候我们会选择主流的包管理工具,如 pnpm,所以这里我讲解一下使用 pnpm 如何打 patch 补丁。

pnpm 打补丁 和传统的 yarn 和 npm 打补丁是不同的,pnpm 包管理工具其默认就支持了打补丁这个功能 。而 yarn 或者 npm 是需要手动去安装patch-package 这个库来实现的。

具体 yarn 或者 npm 如何实现,这里就不做记录了,会更加复杂一点,可以参考这个文档:手把手教你使用 patch-package 给 npm 包打补丁

pnpm 打补丁大家也可以看其官网:pnpm patch pkg,主要有以下几步:

  • pnpm patch pkg

    如:pnpm patch @radix-ui/themes,执行之后终端会返回一个地址,我们打开它,就是这个对应包的内容。可以对其做一些修改。

  • 打开它,修改你想要改动的代码。

    如我们做一些代码修改,将:root 改为 :host

  • pnpm patch-commit path

    这个 path 就是第一步的 path

    修改完之后我们项目将会多一个 patch 文件夹。已经多一个文件。

  • 检查 node_modules 对应的文件是否已经发生改变

到此,补丁完成。后续我们如果删除 node_modules,重新 pnpm install,安装完成后 pnpm 会自动读取 patch 文件夹下的内容,将代码修改为 patch 内容。

总结

这个就是打补丁的思路和实现,用它可以快速解决一些第三方库的问题。方便又好用!

相关推荐
API快乐传递者6 分钟前
淘宝海外商品详情接口实战指南:从全球开放平台到跨境铺货的全链路方案
java·前端·数据库
gyratesky24 分钟前
支持独立部署的地图方案
前端·gis
a11177624 分钟前
图片转3D模型 img2threejs 开源
前端·开源
老王以为26 分钟前
走进AI Agent第三篇:让 Agent 记住你
前端·人工智能·机器学习
全栈技术负责人34 分钟前
大模型流式输出核心技术:智能 Markdown 渲染引擎方案
前端·javascript·vue.js
码云之上35 分钟前
让聊天机器人学会用工具,星悟接 MCP 的实践
前端·人工智能·前端框架
用户9210802628639 分钟前
从单线程到事件循环:彻底理解 JS 的同步、异步、微任务和宏任务
前端
不一样的少年_1 小时前
明明做了很多事,为什么简历看起来还是没含金量?
前端·后端·招聘
mashang1234567891 小时前
mac安装SnailGitLite并配置Beyond Compare
前端·macos
雪芽蓝域zzs1 小时前
第三十四节:用户新增编辑弹窗增加 el‑tree‑select 部门选择器
前端·javascript·vue.js