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

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 内容。

总结

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

相关推荐
徐小夕16 分钟前
花了一周时间,我们开源了一款PDF编辑SDK,支持在线批注+脱敏
前端·vue.js·github
前端Hardy20 分钟前
Qwik 2.0 Beta 来了:不靠 AI,只靠 Resumability,首屏交互快到离谱
前端·javascript·面试
1-1=030 分钟前
ExtJS 快速入门—— 面板 详细版
前端·jquery
前端攻城狮Qwen31 分钟前
Service Worker在电子菜单中的实际应用
前端
前端Hardy34 分钟前
NW.js v0.109.1 最新稳定版发布:被遗忘的桌面开发神器?启动快 3 倍,内存省 70%!
前端·javascript·vue.js
Kath37 分钟前
[归档][2022-05-16]opensumi看码记录
前端
清风徐来QCQ1 小时前
跨域问题(CORS-Cross-Origin Resource Sharing跨域资源共享)
前端
DanCheOo1 小时前
我写了一个 AI 代码质量流水线,一行命令搞定 Review + 修复 + 测试 + 报告
前端·ai编程
yaaakaaang1 小时前
(六)前端,如此简单!--- 三类通讯
前端
Jinuss1 小时前
源码分析之React中副作用Effect全流程
前端·javascript·react.js