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

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

总结

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

相关推荐
慧一居士34 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead36 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app