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

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

总结

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

相关推荐
黑云压城After4 分钟前
3D魔方-Css实现方法
前端·css·3d
極光未晚24 分钟前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
用户66006766853924 分钟前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css
程序员鱼皮25 分钟前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发
前端赵哈哈26 分钟前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队26 分钟前
React Native 错误处理完全指南
前端
地方地方29 分钟前
event loop 事件循环
前端·javascript·面试
AAA阿giao29 分钟前
不用 JavaScript,你能用 CSS 做到什么?答案:拍一部星战电影!
前端·css
golang学习记37 分钟前
从0死磕全栈之在 Next.js 中使用 Sass
前端
好大的月亮42 分钟前
oss中的文件替换后chrome依旧下载到缓存文件概述
前端·chrome·缓存