利用pnpm patch命令实现依赖包热更新:精准打补丁指南

需求场景

在Element Plus的el-table组件二次开发中,需新增列显示/隐藏控件功能。直接修改node_modules源码存在两大痛点:

  1. 团队协作时修改无法同步

  2. 依赖更新导致自定义代码丢失

解决方案选型

通过patch-package工具实现:

  • 📦 非侵入式修改第三方依赖

  • ⚡ 自动生成补丁文件(.patch)

  • 🔄 依赖重装时自动应用修改

大致的流程也比较简单:通过命令拷贝一份依赖库的文件项目,然后用户对该拷贝的项目进行修改,然后通过提供的命令对修改后的代码以及原来的代码进行diff,生成一个xxx.patch的文件,对应项目的package.json会有个pnpm.patchedDependencies字段来指向patch文件,之前其他人安装依赖后,会自动使用到该patch
PS!!!: 确保你的pnpm>=v7.11.0

demo版本

一、新建demo文件夹

bash 复制代码
mkdir patch-demo

cd patch-demo

pnpm init

完成后得到这样结果

二、安装依赖

bash 复制代码
pnpm i normal-tags

完成后得到这样结果

三、接下来,我们对该库进行自己的一些修改

  1. 首先,执行如下指令:生成一个normal-tags的临时文件夹:
bash 复制代码
# 注意这里要指定对应的版本
pnpm patch [email protected]

You can now edit the following folder: E:\demo\patch-demo\node_modules\.pnpm_patches\[email protected]


  1. 然后我们打开生成的这个链接
    E:\demo\patch-demo\node_modules\.pnpm_patches\[email protected],在里面修改normal-tags的代码

    normal-tags的代码很简单,假设我们要在改方法加上一行打印

  2. 修改完成保存后,执行如下指令:

    bash 复制代码
    pnpm patch-commit E:\demo\patch-demo\node_modules\.pnpm_patches\[email protected]
  3. 然后可以看到项目中生成了一个patches/[email protected]的文件,同时在package.json中也增加了如下配置:


  4. 然后这就搞定了!查看node_modeles下的is-odd代码,该修改已经加上了,后续别人拿到该项目,重新pnpm i也能得到修改后的代码

源码链接

点击-----github源码仓库 or gitee源码仓库

注意

如果使用window并且使用git-bash的话,文件路径要使用两个\\分割, 如:

bash 复制代码
pnpm patch-commit  E:\demo\patch-demo\node_modules\.pnpm_patches\[email protected]

tips:

欢迎大家进群交流cursor踩坑日记

相关推荐
Bl_a_ck22 分钟前
开发环境(Development Environment)
开发语言·前端·javascript·typescript·ecmascript
田本初35 分钟前
使用vite重构vue-cli的vue3项目
前端·vue.js·重构
每天一个秃顶小技巧41 分钟前
02.Golang 切片(slice)源码分析(一、定义与基础操作实现)
开发语言·后端·python·golang
ai产品老杨43 分钟前
AI赋能安全生产,推进数智化转型的智慧油站开源了。
前端·javascript·vue.js·人工智能·ecmascript
帮帮志1 小时前
vue实现与后台springboot传递数据【传值/取值 Axios 】
前端·vue.js·spring boot
程序员Bears1 小时前
从零打造个人博客静态页面与TodoList应用:前端开发实战指南
java·javascript·css·html5
清风细雨_林木木2 小时前
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践
前端·css·vue.js
serve the people2 小时前
解决osx-arm64平台上conda默认源没有提供 python=3.7 的官方编译版本的问题
开发语言·python·conda
小宁爱Python2 小时前
深入掌握CSS Flex布局:从原理到实战
前端·javascript·css
柒七爱吃麻辣烫2 小时前
在Linux中安装JDK并且搭建Java环境
java·linux·开发语言