Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例)

news2024/11/26 9:50:08

1. patch-package 简介

patch-package npm地址
patch-package github文档

npm i patch-package

如果不需要在生产中运行 npm (如:正在制作 web 前端,则可使用 --save dev)

1.2 使用方法

制作修补程序
首先更改 node_modules 文件夹中特定包的文件,然后运行

yarn patch-package package-name

或使用 npx (npm > 5.2)

npx patch-package package-name

package-name 与所更改的程序包的名称相匹配;

如果是第一次使用补丁包,会在应用程序根目录中创建一个名为补丁的文件夹。里面会有一个名为 package name+0.44.0.patch 之类的文件,这是普通旧包名和固定版本之间的差异。提交此项以与您的团队共享修复。

可选项描述
–create-issue对于源代码托管在 GitHub 上的包,此选项会打开一个 web 浏览器,其中包含基于差异的草稿问题。
–use-yarn默认情况下,修补程序包会根据拥有的锁定文件来检查是使用 npm 还是 yarn。如果两者都有,则默认情况下使用 npm。设置此选项以覆盖该默认设置并始终使用纱线。
–exclude < regexp >创建修补程序文件时,忽略与 regexp 匹配的路径。路径是相对于要修补的程序包的根目录的。默认值:package\.json$
–include < regexp >创建修补程序文件时,只考虑与 regexp 匹配的路径。路径是相对于要修补的程序包的根目录的。默认值:*。
–case-sensitive-path-filtering使 --include 或 --exclude 筛选器中使用的 regexp 区分大小写。
–patch-dir指定要放置修补程序文件的目录的名称。

嵌套的程序包
如果试图在特定处修补包,如:node_modules/package/node_modules/另一个包,只需在包名称之间加一个 / 即可:

npx patch-package package/another-package

它也适用于作用域包

npx patch-package @my/package/@my/other-package

2. 修改 vue-pdf 打包后 [hash].worker.js 路径问题

注意:本文 vue-pdf 版本为 ^4.3.0;
vue-pdf 插件中 [hash].worker.js 的默认打包路径是在 dist 根目录下,因项目部署系统原因,需将 [hash].worker.js 文件移入 dist/static/js 目录内。
2.1 修改文件
进入目录 node_modules/worker-loader/dist/index.js 找到

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', { …… });

在这里插入图片描述
修改为

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', { …… });

在这里插入图片描述
2.2 安装插件

npm i patch-package --save-dev
npm i postinstall-postinstall --save-dev

2.3 创建补丁

npx patch-package worker-loader

运行后会在项目根目录下的 patches 目录中创建一个名为 worker-loader+2.0.0.patch 的文件。将该 patch 文件提交后,即可在之后应用该补丁了。
在这里插入图片描述

2.4 添加指令

在 package.json 的 scripts 中加入 “postinstall”: “patch-package”,后续执行 npm install 或 yarn install 命令时,会自动为依赖包打补丁。

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

2.5 注意事项

  • 要修改的依赖包版本最好是固定的,即不会自动升级版本,这样可以避免自动升级后导致补丁包失效,从而打包失败影响原有功能;
  • 协同开发的同学需要重新安装一下依赖;

传送门:package.json中 版本号详解

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

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

相关文章

大数据之Spark集群角色

文章目录 前言一、Spark集群角色介绍&#xff08;一&#xff09;Spark集群简介&#xff08;二&#xff09;集群角色介绍 总结 前言 #博学谷IT学习技术支持# 上篇文章主要介绍了Spark的运行流程&#xff0c;可以通过链接复习以加深印象&#xff1a;Spark运行流程&#xff0c;本…

redis面试重点------源于黑马

缓存问题三兄弟 是因为不同的原因让请求全部打到了数据库而造成的问题 什么是缓存穿透&#xff1f; 缓存穿透是指查询一个数据&#xff0c;在redis和MySQL中都不存在。也就是查询一个数据不存在的数据&#xff0c;导致每次请求都会到达数据库&#xff0c;给数据造成很大的压力…

如何选择最适合你的商城小程序开发公司

随着电子商务的快速发展&#xff0c;越来越多的企业开始认识到商城小程序的重要性。作为一个准备开发商城小程序的企业&#xff0c;你一定会面临一个重要的问题&#xff1a;商城小程序开发哪家好&#xff1f;如何选择最适合你的商城小程序开发公司&#xff1f; 在选择商城小程…

【Java笔试强训 17】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525;杨辉三角…

趣说数据结构 —— 3.线性表中的循环链表与双向链表

本节介绍线性表中的循环链表与双向链表&#xff0c;主要包括基本结构&#xff0c;主要特点以及适用场景三部分内容。 3.1 循环链表与双向链表 循环链表&#xff08;Circular Linked List&#xff09; 是另一种形式的链式存储结构。其特点是表中 最后一个结点的指针域指向头结…

sklearn.metrics 中的f1-score介绍

1 f1_score&#xff0c;averagebinary, macro, micro, weighted F1得分可以解释为精确度和召回率的调和平均值&#xff0c;其中F1得分达到其最佳值为1&#xff0c;最差得分为0。精确度和召回率对F1得分的相对贡献相等。F1得分的公式为: 在多类别和多标签的情况下&#xff0c;这…

4.30学习周报

文章目录 前言文献阅读摘要简介数据源和预处理理论基础与模型构建结果和讨论结论和未来工作 时间序列预测总结 前言 本周阅读文献《Water Quality Prediction Based on LSTM and Attention Mechanism: A Case Study of the Burnett River, Australia》&#xff0c;文献主要提出…

SOLIDWORKS培训|弧长如何标注

大家在使用SolidWorks软件时&#xff0c;如果想对不同形状的弧长度进行标注&#xff0c;可以试试以下方法。 ◉ 标注圆弧 点四下鼠标&#xff0c;需要点击弧线和两个端点。 我们先使用圆心起点圆弧工具绘制一个圆弧。 然后点击智能尺寸&#xff0c;点击圆弧&#xff0c;没错…

【Python_Opencv图像处理框架】信用卡数字识别项目

写在前面 本篇文章是opencv学习的第六篇文章&#xff0c;前面主要讲解了对图像的一些基本操作&#xff0c;这篇文章我们就开始大展身手&#xff0c;将前面所学的基础操作活学活用。既能复习基础操作&#xff0c;又能学到一些新的知识。作为初学者&#xff0c;我尽己所能&#…

Change Buffer详解

change Buffer基本概念 Change Buffer&#xff1a;写缓冲区,是针对二级索引(辅助索引) 页的更新优化措施 作用: 在进行DML(写)操作(insert/update/delete)时&#xff0c;如果请求的是 辅助索引&#xff08;非唯一键索引&#xff09;没有在缓冲池 中时&#xff0c;并不会立刻将…

多态

一、多态性概述 1、静态多态实现的两种方式&#xff1a;模板和函数重载 2、动态多态&#xff08;一般上所说的多态都是指动态多态&#xff09; 示例&#xff1a; 若执行pa->f(pa)&#xff0c;则由动态编联找到派生类&#xff0c;而pa静态类型为A*&#xff0c;所以输出3若执行…

notepad++安装HexEditor插件查看二进制文件

文章目录 前言一、下载 HexEditor 插件二、解压文件三、将插件放置到 plugins 目录下四、重启软件测试 前言 有时候我们需要分析二进制文件&#xff0c;但是分析二进制文件直接用编辑器查看会出现乱码的情况&#xff0c;本文在 notepad 软件上安装一个 HexEditor 插件&#xf…

【Java笔试强训 19】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525;汽水瓶 …

各大“排序”特性及稳定性总结

一、各个排序特性 二、各个排序的稳定性分析及例子 稳定性如何定义&#xff1a;排序算法的稳定性并不是指它在对数组进行排序的时候的时间复杂度是否变化&#xff0c;而是对于相同数值的数据进行排序了之后它们的相对位置是否发生了变化&#xff0c;比如说在考试的时候…

【Java笔试强训 18】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525;统计每…

【Java笔试强训 16】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、判断题 &#x1f525;完全数计…

JAVA入坑之JAVADOC(Java API 文档生成器)与快速生成

目录 一、JAVADOC&#xff08;Java API 文档生成器&#xff09; 1.1概述 1.2Javadoc标签 1.3Javadoc命令 1.4用idea自带工具生成API帮助文档 二、IDEA如何生成get和set方法 三、常见快捷方式 3.1快速生成main函数 3.2快速生成println()语句 3.3快速生成for循环 3.4“…

【Python】序列类型①-列表

文章目录 1. 前言2. 列表的定义3. 列表的下标访问3.1 嵌套列表的下标 4. 列表的切片操作5. 列表的遍历5.1 使用for循环进行遍历5.2 while循环进行遍历 6.添加列表元素6.1 使用append方法添加元素6.2 使用insert方法添加元素 7. 列表的拼接7.1 使用 进行拼接7.2 使用extend 进行…

( 字符串) 696. 计数二进制子串 ——【Leetcode每日一题】

❓696. 计数二进制子串 难度&#xff1a;简单 给定一个字符串 s&#xff0c;统计并返回具有相同数量 0 和 1 的非空&#xff08;连续&#xff09;子字符串的数量&#xff0c;并且这些子字符串中的所有 0 和所有 1 都是成组连续的。 重复出现&#xff08;不同位置&#xff09…

动态规划01背包问题

01背包问题 假设你是一名经验丰富的探险家&#xff0c;背着背包来到野外进行日常探险。天气晴朗而不燥热&#xff0c;山间的风夹杂着花香&#xff0c;正当你欣赏这世外桃源般的美景时&#xff0c;突然&#xff0c;你发现了一个洞穴&#xff0c;这个洞穴外表看起来其貌不扬&…