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

news2024/11/20 0:24:26

背景

        在使用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

npm i patch-package 
"scripts": {
  "postinstall": "patch-package"
}

2、修改 node_modules 中的文件

        直接修改 node_modules 中的文件。

// /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 中)。

npx patch-package packagename

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

npx patch-package vuepress-plugin-nuggets-style-copy

        注意:

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

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

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

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

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 钩子来实现:

"scripts": {  
  "postinstall": "patch-package"  
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1899726.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习笔记——动态路由——OSPF聚合(汇总)

十一、OSPF聚合(汇总) 1、路由聚合(汇总) 路由汇总是一种重要的思想,在大型的项目中是必须考虑的一个重点事项。随着网络的规模越来越大,网络中的设备所需维护的路由表项也就会越来越多,路由表的规模也就会逐渐变大,而路由表是需…

【智能算法应用】麻雀搜索算法SSA优化Kmeans图像分割

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法(SSA)原理及实现 2.数学模型 Kmeans是一种无监督的聚类算法,由于参数简洁,时间复杂度低已成功应用于图像分割,取得了良好的分割效果。但传统的 K 均值聚…

45 mysql truncate 的实现

前言 truncate 是一个我们也经常会使用到的命令 其作用类似于 delete from $table; 但是 他会比 delete 块很多,这里我们来看一下 它的实现 delete 的时候会逐行进行处理, 打上 删除标记, 然后 由后台任务 进行数据处理 truncate table 的实现 执行 sql 如下 …

计算机图形学入门24:材质与外观

1.前言 想要得到一个漂亮准确的场景渲染效果,不只需要物理正确的全局照明算法,也要了解现实中各种物体的表面外观和在图形学中的模拟方式。而物体的外观和材质其实就是同一个意思,不同的材质在光照下就会表现出不同的外观,所以外观…

HTTP与HTTPS的主要区别

HTTP(超文本传输协议)与HTTPS(超文本传输安全协议)的主要区别在于安全性、数据传输方式、默认使用的端口以及对网站的影响。 一、安全性: HTTP是一种无加密的协议,数据在传输过程中以明文形式发送&#x…

使用myCobot280和OAK-D OpenCV DepthAI摄像头制作一个实时脸部跟踪的手机支架!

引言 由于YouTube和Netflix的出现,我们开始躺着看手机。然而,长时间用手拿着手机会让人感到疲劳。这次我们制作了一个可以在你眼前保持适当距离并调整位置的自动移动手机支架,让你无需用手拿着手机。请务必试试! 准备工作 这次我们…

最新版本Anaconda 2024.06-1安装设置

最新版本Anaconda 2024.06-1安装设置 零、时光宝盒 做自己的光,不需要很亮 太阳很强大,耀眼夺目,给世界带来温暖和阳光。 萤火虫很弱小,若隐若现,却给黑暗中前行的人带来希望。 发光不是强者的权利,我们…

CTF入门知识点

CTF知识点 md5函数 <?php$a 123;echo md5($a,true); ?> 括号中true显示输出二进制 替换成false显示输出十六进制绕过 ffifdyop 这个字符串被 md5 哈希了之后会变成 276f722736c95d99e921722cf9ed621c&#xff0c;这个字符串前几位刚好是 or 6 而 Mysql 刚好又会把 …

课题申报书中要用的思路图(技术路线图)30张,超高清!

最近在弄课题申报书的时候&#xff0c;需要画“技术路线图”&#xff1b;和小伙伴们探讨才发现很多人居然不会画这种图&#xff0c;还有很多人在Word里面一点一点拼凑…… 我给大家收集了网上非常热门的30张“技术路线图”&#xff0c;但网上流传的都太模糊了&#xff0c;想看…

Python用户宝典:了解并实现遗传算法

遗传算法是一种基于自然选择的技术&#xff0c;用于解决复杂问题。由于问题很复杂&#xff0c;遗传算法&#xff08;而不是其他方法&#xff09;被用来得出解决问题的合理方案。本文介绍遗传算法的基础知识以及如何用Python来实现。 遗传算法的要素 适应度函数 适应度函数衡…

动手学深度学习(Pytorch版)代码实践 -循环神经网络-54~55循环神经网络的从零开始实现和简洁实现

54循环神经网络的从零开始实现 import math import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2l import matplotlib.pyplot as plt import liliPytorch as lp# 读取H.G.Wells的时光机器数据集 batch_size, num_steps 32, …

鸿蒙‘ohpm‘ 不是内部或外部命令,也不是可运行的程序-解决方案

&#x1f525; 博客主页&#xff1a; 小韩本韩&#xff01; ❤️ 感谢大家点赞&#x1f44d;收藏⭐评论✍️ 在鸿蒙的DevEco Studio的终端下输入 onpm -v 或者 你需要下载第三方ohpm包的时候提示‘ohpm‘ 不是内部或外部命令&#xff0c;也不是可运行的程序- 主要是因为我们…

节省上千元的SSL多域名证书申请方法

在数字化时代的浪潮中&#xff0c;网络安全问题日益凸显其重要性。 作为网络安全的核心组成部分&#xff0c;SSL证书&#xff08;安全套接层证书&#xff09;在确保数据传输的机密性、完整性和真实性方面发挥着至关重要的作用。 申请便宜SSL证书步骤 1. 登录来此加密网站&am…

2024年特种设备(电梯作业)题库考试题库

1.直接作用式液压电梯轿厢与柱塞&#xff08;缸筒&#xff09;之间的连接应为&#xff08;&#xff09;。 A.刚性连接 B.固定连接 C.法兰连接 D.挠性连接 答案&#xff1a;D 2.正常情况下&#xff0c;当电磁式继电器线圈得电时&#xff0c;其常开触点将&#xff08;&…

【数据结构】08.堆及堆的应用

一、堆的概念及结构 堆(Heap)是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵完全二叉树的数组对象。 堆是非线性数据结构&#xff0c;相当于一维数组&#xff0c;有两个直接后继。 如果有一个关键码的集合K { k₀&#xff0c;k₁&#xff0c;k₂ &#…

MySQL数据库树状结构查询

一、树状结构 MySQL数据库本身并不直接支持树状结构的存储&#xff0c;但它提供了足够的灵活性&#xff0c;允许我们通过不同的方法来模拟和实现树状数据结构。具体方法看下文。 数据库表结构&#xff1a; 实现效果 查询的结果像树一样 二、使用 以Catalog数据表&#xff0c…

ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含

目录 1、web82 2、web83 3、web84 4、web85 5、web86 1、web82 新增过滤点 . &#xff0c;查看提示&#xff1a;利用 session 对话进行文件包含&#xff0c;通过条件竞争实现。 条件竞争这个知识点在文件上传、不死马利用与查杀这些里面也会涉及&#xff0c;如果大家不熟悉…

照片边框添加 | Python | 免费无广告

演示图 说明 照片边框添加 | Python | 免费无广告 &#x1f505;理论上Mac及Windos都可运行&#xff0c;只需要python环境即可~~~ &#x1f505;目前提供了两种样式&#xff0c;白色边框以及透明边框:P2是原图&#xff0c;P3是白色边框的效果&#xff0c;P4是透明边框效果。 …

python: create Envircomnet in Visual Studio Code 创建虚拟环境

先配置python开发环境 1.在搜索栏输入“>" 或是用快捷组合键ctrlshiftP键 就会显示”>",再输入"python:" 选择已经安装好的python的版本,选定至当前项目中&#xff0c;都是按回车 就可以看到创建了一个虚拟环境的默认的文件夹名".venv" 2 …

动手学深度学习(Pytorch版)代码实践 -循环神经网络-53语言模型和数据集

53语言模型和数据集 1.自然语言统计 引入库和读取数据&#xff1a; import random import torch from d2l import torch as d2l import liliPytorch as lp import numpy as np import matplotlib.pyplot as plttokens lp.tokenize(lp.read_time_machine())一元语法&#xf…