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

news2024/9/28 5:24:07

当我们使用 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。

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

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

相关文章

dev board sig技术文章:轻量系统适配ARM架构芯片平台

摘要:本文简单介绍OpenHarmony轻量系统移植,会分多篇 适合群体:想自己动手移植OpenHarmony轻量系统的朋友 开始尝试讲解一下系统的移植,主要是轻量系统,也可能会顺便讲下L1移植。 1.1移植类型 OpenHarmony轻量系统的…

腾讯云服务器收费价格表(腾讯云服务器租用价格表)

作为国内领先的云计算服务提供商,腾讯云凭借其稳定、安全、高效的特点,备受用户青睐。本文将详细介绍腾讯云服务器的收费价格表及使用场景,帮助大家更好地了解并选择合适的云服务器方案。 一、轻量应用服务器 轻量应用服务器是一款开箱即用的…

数字人民币如何将支付宝钱包余额转入到微信支付钱包余额?

数字人民币如何将支付宝钱包余额转入到微信支付钱包余额? 第一步:获取微信支付数字人民币钱包编号 1.1、手机上找到并打开数字人民币APP; 1.2、打开后找到微众银行(微信支付)微信钱包,并点击翻转获取收款…

攻防世界-WEB-fileinclude

访问url,可以看到一些提示,绝对路径/var/www/html/index.php,也提示了flag在flag.php中。 快捷键Ctrlu,查看网页源代码 思路: 源代码中看到 include($lan.".php"); ,可知此处存在文件包含。$lan的值是从co…

虚拟线程最佳实践

Virtual Threads: An Adoption Guide 虚拟线程:采用指南 接上篇 Virtual Threads 虚拟线程 原文:https://docs.oracle.com/en/java/javase/21/core/virtual-threads.html 虚拟线程是由 Java 运行时而不是操作系统实现的 Java 线程。虚拟线程和传统线程&…

Datax从mysql同步数据到HDFS

在实际使用Datax的时候,比较常用的是同步业务数据(mysql中的数据)到HDFS来实现数仓的创建,那么怎么实现呢?我们一步步来实现(基于Datax 3.0.0) 1、检查环境,需要安装完一个Datax&am…

网络基础面试题

1. ISO/OSI的七层模型 ISO国际标准化组织 OSI开放系统互连 TCP和UDP都会进行差错校验,TCP会告诉A包发错了,但UDP不会告诉A发错了会把包丢弃。 静态路由不需要路由器做任何的计算,对路由器的消耗是最小的,效率最高但是缺点是…

Qt开发 - Qt基础类型

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

“智能制造进园区·浙江站和专家行”活动成功举办

为进一步加强央地联动&#xff0c;强化智能制造系统推进格局&#xff0c;促进重点区域行业智能制造供需对接&#xff0c;2023年9月12日-15日&#xff0c;在工业和信息化部装备工业一司指导下&#xff0c;由国家智能制造专家委员会、浙江省经济和信息化厅、智能制造系统解决方案…

专访中欧财富伍春兰:财富管理行业数字化转型升级,数据库如何选型?

以下文章来源于InfoQ数字化经纬。 InfoQ数字化经纬&#xff1a; InfoQ极客传媒旗下官方账号。面向数字化管理者、从业者、洞察者&#xff0c;提供数字化企业案例、政策解读、研究报告&#xff0c;做数字时代的「记录者」。 作者 | 赵钰莹 嘉宾 | 伍春兰 中欧财富技术总监 …

如何在微信上制作自己的小程序卖东西

在当今的数字化时代&#xff0c;微信小程序已成为电商行业的重要平台。本文将详细解析电商微信小程序的制作流程&#xff0c;帮助你了解从零到上线的过程。 一、前期准备 1. 确定商城定位和目标群体&#xff1a;在制作电商微信小程序前&#xff0c;你需要明确商城的定位&#x…

解决连接数据库提示:Public Key Retrieval is not allowed

最近在使用新的用户连接mysql时&#xff0c;总是提示&#xff1a;Public Key Retrieval is not allowed 解决方法一&#xff1a;在&#xff08;连接属性&#xff09;添加allowPublicKeyRetrievaltrue 解决方法二&#xff08;不建议&#xff09;&#xff1a;先在cmd上登录

爬虫 — Js 逆向案例五闪职网登录

目标网站&#xff1a;http://shanzhi.spbeen.com/login/ 需求&#xff1a;找到密码加密的过程&#xff0c;进行加密 案例分析 1、多输入几次错误的密码&#xff0c;查看哪些字段是加密的。 2、如何没有 Search 到相关的字段&#xff0c;可以在 JS 里面找一找。 3、如果看到 JS…

广东深圳建筑模板厂家-能强优品木业

深圳作为中国经济腾飞的重要城市&#xff0c;建筑业一直是该地区的重点发展领域。在建筑施工过程中&#xff0c;建筑模板是不可或缺的关键组成部分。于是&#xff0c;广东深圳拥有一家备受赞誉的建筑模板厂家&#xff0c;为当地建筑行业提供优质产品和服务。这家建筑模板厂家就…

rtsp转webrtc的其他几个项目

1&#xff09; mpromonet/webrtc-streamer &#xff08;c开发&#xff09; 把rtsp转webrtc&#xff0c; 通过 load urls from JSON config file ./webrtc-streamer -C config.json 通过exe文件和docker项目实际测试可以显示&#xff0c;但不太稳定加载慢,有时候出错后很难…

Redis 面霸篇:从高频问题透视核心原理

Redis 为什么这么快&#xff1f; 很多人只知道是 K/V NoSQl 内存数据库&#xff0c;单线程……这都是没有全面理解 Redis 导致无法继续深问下去。 这个问题是基础摸底&#xff0c;我们可以从 Redis 不同数据类型底层的数据结构实现、完全基于内存、IO 多路复用网络模型、线程…

go 语言 负载均衡 为反向代理添加负载均衡 拓展ReverseProxy

随机负载 package randomimport ("errors""math/rand" )type RandomBalance struct {//当前索引curIndex int//存储负载均衡的地址rss []string//观察主体//conf LoadBalanceConf }func (r *RandomBalance) Add(params ...string) error {if len(params) …

华为OD机试 - 靠谱的车 - 逻辑分析(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

【Phoenix】phoenix实现每个Primarykey主键保留N版本数据,CDC数据记录为Changelog格式

一、背景&#xff1a; CDC数据中包含了&#xff0c;数据的变更过程。当CDC写入传统数据库最终每一个primary key下会保存一条数据。当然可以使用特殊手段保存多分记录但是显然造成了数据膨胀。 另外数据湖Hudi(0.13.1)是不支持保存所有Changelog其Compaction机制会清除所有旧版…

语义分割笔记(二):DeepLab V3对图像进行分割(自定义数据集从零到一进行训练、验证和测试)

文章目录 一、语义分割介绍1.1 语义分割和实例分割的区别1.2 DeepLab系列对比 二、代码下载2.1 代码测试2.2 视频学习 三、数据集准备3.1 Json转png3.2 数据集划分 四、模型训练五、模型测试六、模型评估 一、语义分割介绍 语义分割是计算机视觉中的一项技术&#xff0c;旨在将…