使用patch-package自动修改node_modules中的内容/打补丁

背景

在使用VuePress搭建个人博客的过程中,我需要使用到一个用来复制代码块的插件uepress-plugin-nuggets-style-copy。

问题:插件可以正常安装,但是启动会报错。通过查看错误信息,定位是插件中的copy.vue文件出现错误,在网上查找方法,发现是通过打补丁修改插件源码的方式来解决报错的问题。

解决方案

使用 patch-package :patch-package 是一个非常实用的工具,它允许开发者在本地直接修改 node_modules 中的第三方依赖包,并通过生成和应用补丁(patch)文件来持久化这些修改,确保在重新安装依赖或在不同环境间共享这些修改时保持一致。

当你使用 npx patch-package 修改 node_modules 中的某个包并生成补丁文件后,这个补丁文件可以被提交到版本控制系统(如 SVN 或 Git)中,以便其他人在拉取项目时能够应用相同的修改,而无需手动修改 node_modules。

步骤

以上面这个情况为例子,梳理一下打补丁步骤:

1、安装并修改 package.json

bash 复制代码
npm i patch-package 
TypeScript 复制代码
"scripts": {
  "postinstall": "patch-package"
}

2、修改 node_modules 中的文件

直接修改 node_modules 中的文件。

TypeScript 复制代码
// /node_module/vuepress-plugin-nuggets-style-copy/copy.vue 源码
if (visibleTip) {
  this.$message({
    time,
    content,
    title
  });
}
// /node_module/vuepress-plugin-nuggets-style-copy/copy.vue 修改后的代码
if (visibleTip) {
  this.$message({
    time:time,
    content:content,
    title:title
  });
}

3、使用 patch-package 生成补丁

在修改了 node_modules 之后,你需要使用 npx patch-package 命令来生成补丁文件。确保你已经安装了 patch-package 作为项目的开发依赖(在 package.json 的 devDependencies 中)。

bash 复制代码
npx patch-package packagename

运行以上命令,将 packagename 替换为你实际修改的包的名称:

bash 复制代码
npx patch-package vuepress-plugin-nuggets-style-copy

注意:

此时如果成功了,根目录下p会出现一个patches文件夹

没有成功则出现以下情况:

4、提交补丁文件到版本控制系统

可以将生成的 .patch 文件添加到版本控制系统中,并提交这些更改。

bash 复制代码
git add patches/packagename+*.patch  
git commit -m "Add patch for packagename to fix/add XYZ"  
git push

5、在其他人拉取项目后应用补丁

当其他人从版本控制系统拉取项目时,他们需要确保已经安装了 patch-package 作为项目的开发依赖(这通常会在 npm install 或 yarn 时自动完成)。

然后,他们可以通过运行 postinstall 脚本来自动应用所有补丁。这可以通过在 package.json 的 scripts 部分添加一个 postinstall 钩子来实现:

bash 复制代码
"scripts": {  
  "postinstall": "patch-package"  
}

此时,当运行 npm install 或 yarn 时,postinstall 脚本会自动执行,patch-package 会查找并应用所有 .patch 文件中的修改。

相关推荐
uhakadotcom4 分钟前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
V---scwantop---信8 分钟前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体
Moonnnn.15 分钟前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程
uhakadotcom15 分钟前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
机器视觉知识推荐、就业指导36 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4942 分钟前
golang接口-interface
java·前端·golang
吴梓穆1 小时前
UE5学习笔记 FPS游戏制作37 蓝图函数库 自己定义公共方法
笔记·学习·ue5
慕斯策划一场流浪1 小时前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
吴梓穆1 小时前
UE5学习笔记 FPS游戏制作41 世界模式显示UI
笔记·学习·ue5