使用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 文件中的修改。

相关推荐
WEI_Gaot14 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员17 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai18 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙18 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子18 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125020 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll20 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding20 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥32 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安41 分钟前
CSRF请求伪造
前端·网络安全·csrf