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。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据-玩转数据-Flink状态后端(下)

一、状态后端 每传入一条数据,有状态的算子任务都会读取和更新状态。由于有效的状态访问对于处理数据的低延迟至关重要,因此每个并行任务(子任务)都会在本地维护其状态,以确保快速的状态访问。 状态的存储、访问以及维护,由一个…

机器学习 day35(决策树)

决策树 上图的数据集是一个特征值X采用分类值,即只取几个离散值,同时也是一个二元分类任务,即标签Y只有两个值 上图为之前数据集对应的决策树,最顶层的节点称为根节点,椭圆形节点称为决策节点,矩形节点称…

flutter简单的本地草稿箱功能

需求1:发帖退出时提示是否保存草稿 需求2:每条草稿中可以保存多张图片(最多9张)或一条视频及三十来个其它参数 需求3:每条草稿都是可以被覆盖的、可以点击删除 需求4:草稿页面可以一键清空 需求5:草稿随app删除一起没掉…

Linux学习第14天:Linux设备树(一):枝繁叶茂见晴天

本节笔记主要学习了Linux设备树相关知识点,由于内容较多,打算分两天进行总结。今天着重学习Linux设备树,主要包括前三节内容,分别是概念、格式和语法。 本节思维导图内容如下: 一、什么是设备树 设备树可以用一个图来进…

基于Gradio/Stable Diffusion/Midjourney的AIGC自动图像绘画生成软件 - Fooocus

0.参考 本项目:GitHub - lllyasviel/Fooocus: Focus on prompting and generating 作者:Lvmin Zhang ​编辑 lllyasviel 另一杰作 ContorlNet https://github.com/lllyasviel/ControlNet 模型:https://huggingface.co/stabilityai/stab…

WorkPlus | 好用、专业、安全的局域网即时通讯及协同办公平台

自国家于2022年发布的《关于加强数字政府建设的指导意见》以来,我国数字政府建设已经迈入了一个全新的里程碑,迎来了全面改革和深化升级的全新阶段。 WorkPlus作为自主可控、可信安全、专属定制的数字化平台,扮演着政务机关、政府单位以及各…

c语言输出杨辉三角

#include<stdio.h> int main() {int x 0; //表示杨辉三角的的大小int y 1;printf("请输入x的值: ");scanf("%d", &x);for (int i 0; i < x; i) {for (int j 0; j < i; j) {if (j 0 || i 0) {y 1;}else {y y * (i - j 1) / j;}pri…

Git分布式版本控制工具

概念 Git是一个分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件&#xff08;Java类、xml文件、html页面等&#xff09;&#xff0c;在软件开发过程中被广泛使用。 开发中的实际场景 1.备份 2.代码还原 3.协同开发 4.追溯问题代码的编写人和编写时间 …

每日一题(两数相加)

每日一题&#xff08;两数相加&#xff09; 2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 思路 思路&#xff1a; 由于链表从头开始向后存储的是低权值位的数据&#xff0c;所以只需要两个指针p1和p2&#xff0c;分别从链表的头节点开始遍历。同时创建一个新的指针new…

QT基础教程(对话框1)

文章目录 前言一、对话框概念二、模态对话框三、非模态对话框总结 前言 本篇文章我们来讲解QT中的对话框。 资料合集地微信公众号&#xff1a;优质程序猿一、对话框概念 在Qt中&#xff0c;对话框&#xff08;Dialog&#xff09;是一种用于与用户进行交互、收集输入或展示信…

常用的辅助类(必会)

1.CountDownLatch package com.kuang.add;import java.util.concurrent.CountDownLatch;//计数器 减法 public class CountDownLatchDemo {public static void main(String[] args) throws InterruptedException {//总数是6&#xff0c;必须要执行任务的时候&#xff0c;再使用…

第6篇 vue的打包工具webpack

一 webpack 1.1 webpack的作用 webpack是一个打包工具&#xff0c;可以把多个静态资源文件打包成一个文件。如图所示&#xff1a; 1.2 版本依赖对照关系 PS E:\vue-project\vue-demo0902\wp-demo> npm -v 6.4.1 PS E:\vue-project\vue-demo0902\wp-demo> node -v v10.…

GB28181学习(五)——实时视音频点播(信令传输部分)

要求 实时视音频点播的SIP消息应通过本域或其他域的SIP服务器进行路由、转发&#xff0c;目标设备的实时视音频流宜通过本域的媒体服务器进行转发&#xff1b;采用INVITE方法实现会话连接&#xff0c;采用RTP/RTCP协议实现媒体传输&#xff1b;信令流程分为客户端主动发起和第…

肖sir__mysql之多表练习题__007

已知2张基本表&#xff1a;部门表&#xff1a;dept &#xff08;部门号&#xff0c;部门名称&#xff09;;员工表 emp&#xff08;员工号&#xff0c;员工姓名&#xff0c;年龄&#xff0c;入职时间&#xff0c;收入&#xff0c;部门号&#xff09; 1&#xff1a;dept表中有4条…

Linux C++ OpenVINO 物体检测 Demo

目录 main.cpp #include <iostream> #include <string> #include <vector> #include <openvino/openvino.hpp> #include <opencv2/opencv.hpp> #include <dirent.h> #include <stdio.h> #include <time.h> #include …

【探索Linux】—— 强大的命令行工具 P.8(进程地址空间)

阅读导航 前言一、内存空间分布二、什么是进程地址空间1. 概念2. 进程地址空间的组成 三、进程地址空间的设计原理1. 基本原理2. 虚拟地址空间 概念 大小和范围 作用 虚拟地址空间的优点 3. 页表 四、为什么要有地址空间五、总结温馨提示 前言 前面我们讲了C语言的基础知识&am…

3. MongoDB高级进阶

3. MongoDB高级进阶 3.1. MongoDB的复制集 3.1.1. 复制集及原理 MongoDB复制集的主要意义在于实现服务高可用 复制集的现实依赖于两个方面的功能: 数据写入时将数据迅速复制到另一个独立节点上在接受写入的节点发生故障时自动选举出一个新的替代节点 复制集在实现高可用的…

抽象类和接口

目录 抽象类 接口 基本概念 多接口使用 为什么接口解决了Java的多继承问题&#xff1f; 接口的继承 克隆 Clonable接口 拷贝 Object类 抽象类 1.使用abstract修饰的方法称为抽象方法 2.使用abstract修饰的类称为抽象类 3.抽象类不可以被实例化 e.g.Shape shape ne…

计算机毕业设计 基于SSM+Vue的农业信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

Docker概念通讲

目录 什么是Docker&#xff1f; Docker的应用场景有哪些&#xff1f; Docker的优点有哪些&#xff1f; Docker与虚拟机的区别是什么&#xff1f; Docker的三大核心是什么&#xff1f; 如何快速安装Docker&#xff1f; 如何修改Docker的存储位置&#xff1f; Docker镜像常…