利用pnpm patch命令实现依赖包热更新:精准打补丁指南
需求场景
在Element Plus的el-table组件二次开发中,需新增列显示/隐藏控件功能。直接修改node_modules源码存在两大痛点:
-
团队协作时修改无法同步
-
依赖更新导致自定义代码丢失
解决方案选型
通过patch-package工具实现:
-
📦 非侵入式修改第三方依赖
-
⚡ 自动生成补丁文件(.patch)
-
🔄 依赖重装时自动应用修改
大致的流程也比较简单:通过命令拷贝一份依赖库的文件项目,然后用户对该拷贝的项目进行修改,然后通过提供的命令对修改后的代码以及原来的代码进行diff,生成一个
xxx.patch
的文件,对应项目的package.json
会有个pnpm.patchedDependencies
字段来指向patch
文件,之前其他人安装依赖后,会自动使用到该patch
PS!!!: 确保你的
pnpm>=v7.11.0
demo版本
一、新建demo文件夹
mkdir patch-democd patch-demopnpm init
完成后得到这样结果
二、安装依赖
pnpm i normal-tags
完成后得到这样结果
三、接下来,我们对该库进行自己的一些修改
- 首先,执行如下指令:生成一个normal-tags的临时文件夹:
# 注意这里要指定对应的版本
pnpm patch normal-tags@0.0.3You can now edit the following folder: E:\demo\patch-demo\node_modules\.pnpm_patches\normal-tags@0.0.3
-
然后我们打开生成的这个链接
E:\demo\patch-demo\node_modules\.pnpm_patches\normal-tags@0.0.3
,在里面修改normal-tags
的代码normal-tags
的代码很简单,假设我们要在改方法加上一行打印
-
修改完成保存后,执行如下指令:
pnpm patch-commit E:\demo\patch-demo\node_modules\.pnpm_patches\normal-tags@0.0.3
-
然后可以看到项目中生成了一个patches/normal-tags@0.0.3.patch的文件,同时在package.json中也增加了如下配置:
-
然后这就搞定了!查看node_modeles下的is-odd代码,该修改已经加上了,后续别人拿到该项目,重新pnpm i也能得到修改后的代码
源码链接
点击-----github源码仓库 or gitee源码仓库
注意
如果使用window并且使用git-bash
的话,文件路径要使用两个\\
分割, 如:
pnpm patch-commit E:\demo\patch-demo\node_modules\.pnpm_patches\normal-tags@0.0.3
tips:
欢迎大家进群交流cursor踩坑日记