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

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

总结

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

相关推荐
数学分析分析什么?21 分钟前
微前端之qiankun+vue3简易示例
前端·微前端·qiankun
西洼工作室22 分钟前
前端项目目录结构全解析
前端·vue.js
咫尺的梦想00722 分钟前
vue的生命周期
前端·javascript·vue.js
一口甜西瓜26 分钟前
nuxt2.x部署到linux
前端·nuxt.js
Data_Adventure36 分钟前
从 TypeScript 到 Java(2):从脚本执行到 main 方法 —— 理解 Java 的程序入口
前端·后端
Data_Adventure43 分钟前
从 TypeScript 到 Java(1):理解类与包结构
前端·后端
Jseeza1 小时前
从零理解React Context:神奇的上下文机制
前端
Android疑难杂症1 小时前
一文讲透鸿蒙开发应用框架体系
前端·harmonyos
代码搬运媛1 小时前
前端使用 docx-preview 实现word解析实战
前端
有点笨的蛋1 小时前
JavaScript Promise 机制解析
前端·javascript