当前位置: 首页 > news >正文

vue修改node_modules打补丁步骤和注意事项

当我们使用 npm 上的第三方依赖包,如果发现 bug 时,怎么办呢?

  想想我们在使用第三方依赖包时如果遇到了bug,通常解决的方式都是绕过这个问题,使用其他方式解决,较为麻烦。或者给作者提个issue,然后等待作者的修复,等待的时间不可控。那么这时候是不是就可以借助patch-package自己动手去修复该bug,感觉是不是很棒,并且还可以在第三方依赖包上,根据业务需求扩展能力。

  当然最好还是扩展一些通用性比较高的能力,如果是比较通用且该能力大多数开发者都有这种诉求的话可以给第三方依赖包提个PR。参与开源项目是不是简单了起来了~(不要在魔改的路上越走越远)

  挺多文章有介绍的,可以参考:

1、vue-pdf问题解决及patch-package简介:https://www.jianshu.com/p/d1887e02f8d6

2、使用“黑魔法”优雅的修改第三方依赖包:https://zhuanlan.zhihu.com/p/412753695

3、使用patch-package定制node_modules中的依赖包:https://blog.csdn.net/qq_32429257/article/details/111051217

  具体应用场景就不多说了,可以自己看文章,其实还是有蛮多需求的,这里主要记录一下具体使用步骤。

patch-package的使用

Step1:安装

使用npm安装

npm i patch-package

推荐使用yarn安装

yarn add patch-package postinstall-postinstall

Step2:修改package.json文件

package.json的scripts中声明了一系列的npm脚本命令,如下:(参考资料:http://caibaojian.com/npm/misc/scripts.html)

  • prepublish: 在包发布之前运行,也会在npm install安装到本地时运行
  • publish,postpublish: 包被发布之后运行
  • preinstall: 包被安装前运行
  • install,postinstall: 包被安装后运行
  • preuninstall,uninstall: 包被卸载前运行
  • postuninstall: 包被卸载后运行
  • preversion: bump包版本前运行
  • postversion: bump包版本后运行
  • pretest,test,posttest: 通过npm test命令运行
  • prestop,stop,poststop: 通过npm stop命令运行
  • prestart,start,poststart: 通过npm start命令运行
  • prerestart,restart,postrestart: 通过npm restart运行

可以看到依赖包在安装完之后会执行postinstall命令

所以我们在package.json的scripts里面增加:"postinstall": "patch-package"

"scripts": {***,
+   "postinstall": "patch-package"
}

修改 package.json,新增命令 "postinstall": "patch-package",如图:

Step3.执行命令
npx patch-package 修改的文件夹名字 此处文件夹名字指 node_modules 中下的文件夹名。

比如如:npx patch-package pdfjs-dist 这里的 pdfjs-dist 就是我们修改的文件的主文件夹名。

Step4.生成补丁
命令执行结束后查看根目录下是否生成了 patches 文件夹,patches文件夹是自动生成的,如图:

Step5.npm install 验证
在项目里 npm install 验证,是否有补丁包的提示,有就表示打补丁成功!

注意事项1:

1、自动部署中不生效
报错信息
npm WARN lifecycle nuxt-base-pc@1.0.0~postinstall: cannot run in wd nuxt-base-pc@1.0.0 patch-package (wd=/data/servers/jenkins/workspace/nginx)
解决办法
在项目根目录添加.npmrc 文件,写入:
unsafe-perm = true

注意事项2:

  1. patch是锁定版本号的,如果升级了版本,patch内容将会失效,最好在package.json能够锁定版本号。
  2. 魔改的同时,也局限了升级的能力,尽量还是去提issue和PR。

相关文章:

vue修改node_modules打补丁步骤和注意事项

当我们使用 npm 上的第三方依赖包,如果发现 bug 时,怎么办呢? 想想我们在使用第三方依赖包时如果遇到了bug,通常解决的方式都是绕过这个问题,使用其他方式解决,较为麻烦。或者给作者提个issue,然…...

CSS 响应式设计:媒体查询

文章目录 媒体查询添加断点为移动端优先设计其他断点方向:横屏/竖屏 媒体查询 CSS中的媒体查询是一种用于根据不同设备的屏幕尺寸和分辨率来定义样式表的方法。在CSS中,我们可以使用媒体查询来根据不同的设备类型和屏幕尺寸来应用不同的样式&#xff0c…...

Qt开发 - Qt基础类型

1.基础类型 因为Qt是一个C 框架, 因此C中所有的语法和数据类型在Qt中都是被支持的, 但是Qt中也定义了一些属于自己的数据类型, 下边给大家介绍一下这些基础的数类型。 QT基本数据类型定义在#include <QtGlobal> 中&#xff0c;QT基本数据类型有&#xff1a; 虽然在Qt中…...

Docker-如何获取docker官网x86、ARM、AMD等不同架构下的镜像资源

文章目录 一、概要二、资源准备三、环境准备1、环境安装2、服务器设置代理3、注册docker账号4、配置docker源 四、查找资源1、服务器设置代理2、配置拉取账号3、查找对应的镜像4、查找不同版本镜像拉取 小结 一、概要 开发过程中经常会使用到一些开源的资源&#xff0c;比如经…...

Vuex状态管理最佳实践

文章目录 单一状态树使用模块使用常量定义Mutation类型使用Actions处理异步操作使用Getters计算属性严格模式分模块管理Getter、Mutation和Action&#xff1a;注释和文档&#xff1a;Vue Devtools ✍创作者&#xff1a;全栈弄潮儿 &#x1f3e1; 个人主页&#xff1a; 全栈弄潮…...

platform和led中断项目

设备树根节点下添加 myledIrqPlatform{compatible"hqyj,myledIrqPlatform";reg<0x22334455 59>;interrupt-parent<&gpiof>;interrupts<9 0>;led1-gpio<&gpioe 10 0>;//10表示使用的gpioe第几个管脚 0&#xff0c;表示gpio默认属性…...

R语言-关于颜色

目录 颜色 示例 R 颜色板 参考&#xff1a; 颜色 什么场景会用到颜色&#xff1f;比如在绘图过程中&#xff0c;为了让图更好看&#xff0c;有的时候&#xff0c;需要选择使用不同的颜色进行绘制或者填充。本文提供了R颜色的相关参数。 在R中&#xff0c;可以通过颜色下标…...

抖音seo优化排名源码搭建

抖音seo优化排名技术开发源码搭建&#xff1a; 思路&#xff1a;看上去比较简单&#xff0c;貌似使用 get、set 这两个 trap 就可以&#xff0c;但实际上并不是。实际上还需要实现 has, ownKeys , getOwnPropertyDescriptor 这些 trap&#xff0c;这样就能最大限度的限制私有属…...

pytorch的卷积层池化层和非线性变化 和机器学习线性回归

卷积层&#xff1a; 两个输出的情况 就会有两个通道 可以改变通道数的 最简单的神经网络结构&#xff1a; nn.Mudule就是继承父类 super执行的是 先执行父类函数里面的 forward执行的就是前向网络&#xff0c;就是往前推进的&#xff0c;当然也有反向转播&#xff0c;那就是…...

Java手写快速选择算法应用拓展案例

Java手写快速选择算法应用拓展案例 1. 引言 快速选择算法是一种高效的选择算法&#xff0c;可以用于在数组中找到第K小/大的元素。除了基本的应用场景外&#xff0c;快速选择算法还可以应用于其他问题&#xff0c;如查找中位数、查找最大/最小值等。本文将介绍两个拓展应用案…...

js制作柱状图的x轴时间, 分别展示 月/周/日 的数据

背景 有个需求是要做一个柱状图, x 轴是时间, y 轴是数量. 其中 x 轴的时间有三种查看方式: 月份/周/日, 也就是分别查看从当前日期开始倒推的最近每月/每周/每日的数量. 本篇文章主要是用来制作三种不同的 x 轴 从当前月开始倒推月份 注意 getMonth() 函数可以获取当前月份…...

安防监控/视频汇聚/云存储/AI智能视频分析平台EasyCVR下级海康设备无法级联是什么原因?

安防视频监控平台/视频集中存储/云存储/磁盘阵列EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。 有用户反馈&…...

HttpUtils带连接池

准备祖传了&#xff0c;有问题欢迎大家指正。 HttpUtil import com.txlc.cloud.commons.exception.ServiceException; import com.txlc.dwh.common.constants.MyErrorCode; import org.ssssssss.script.annotation.Comment;import java.io.UnsupportedEncodingException; impo…...

智慧养殖:浅谈视频监控与AI智能识别技术助力奶牛高效、智慧养殖

一、方案背景 随着科技的飞速发展&#xff0c;智能化养殖逐渐成为现代畜牧业的发展趋势。人工智能技术、物联网、视频技术、云计算、大数据等新兴技术&#xff0c;正在为奶牛养殖业带来全新的变革。越来越多的牧场、养殖场开始运用新技术来进行智能监管、提高生产效率、降低生…...

一文总结提示工程框架,除了CoT还有ToT、GoT、AoT、SoT、PoT

夕小瑶科技说 原创 编译 | 谢年年 大语言模型LLM被视为一个巨大的知识库&#xff0c;它可以根据你提出问题或陈述的方式来提供答案。就像人类可能会根据问题的不同提供不同的答案一样&#xff0c;LLM也可以根据输入的不同给出不同的答案。因此&#xff0c;你的问题或陈述方式就…...

Java面试笔试acm版输入

首先区分scanner.nextInt()//输入一个整数&#xff0c;只能读取一个数&#xff0c;空格就停止。 scanner.next()//输入字符串&#xff0c;只能读取一个字符串&#xff0c;空格就停止&#xff0c;但是逗号不停止。 scanner.nextLine() 读取一行&#xff0c;换行停止&#xff0c…...

新手怎样快速上手接口测试?掌握这几个知识点直接起飞!

接口测试是测试系统组件间接口的一种方式&#xff0c;接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是检查数据的增删改查操作&#xff0c;以及系统之间的逻辑关系等。 接口的几种类型 接口的类型包括&#xff1a;post &#xff0c;get&…...

IDEA 启动 java web 老项目

背景&#xff1a;一套 java web 老代码&#xff0c;使用 eclipse 工具开发。内网&#xff0c;无 eclipse 开发工具&#xff0c;只有 IDEA。 代码目录结构如下&#xff1a; demo/.settings/* demo/src/com/demo/controller/* demo/webapp/js/* demo/webapp/jsp/* demo/webapp/M…...

软路由和硬路由的区别是什么,性价比与可玩性分析

软路由和硬路由是两种不同类型的路由器设备&#xff0c;它们在基本原理、功能、性能和灵活性等方面存在一些区别&#xff1a; 硬件&#xff1a;软路由是基于一台普通的计算机或服务器&#xff0c;通过软件来实现路由器的功能&#xff1b;而硬路由是专门设计的硬件设备&#xff…...

《TCP/IP网络编程》阅读笔记--多线程服务器端的实现

目录 1--多线程的优点 2--进程和线程的差异 3--线程创建 4--线程使用 5--线程安全问题 6--互斥量 7--信号量 8--线程销毁 9--多线程并发聊天程序 9-1--服务器端 9-2--客户端 9-3--测试结果 1--多线程的优点 多进程服务器的缺点&#xff1a; ① 创建进程的过程会带来…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...