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

这篇具有很好参考价值的文章主要介绍了Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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', { …… });

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

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

Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例),Vue 2.x,vue.js,pdf
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 文件提交后,即可在之后应用该补丁了。
Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例),Vue 2.x,vue.js,pdf

2.4 添加指令

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

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

2.5 注意事项

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

传送门:package.json中 版本号详解文章来源地址https://www.toymoban.com/news/detail-684775.html

到了这里,关于Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Git 打patch (打补丁)的使用

    patch 的使用 一般是diff ,apply ,format-patch,am 1 生成patch git diff test.patch  这个是打补丁(test.patch自己取的名字,这个命令可以看出没有指定修改的问题所以默认把所有修改的文件都打patch了,同时还需要注意,这里是本地修改的没有执行add缓存的) 如果想指定某个文件的修改打patch可以

    2024年01月25日
    浏览(38)
  • 三分钟搞懂git patch 补丁的使用,小学生也能看懂

    Git中的Patch(补丁)功能允许用户将不同分支或提交之间的更改保存为一种可重用的文件格式。通过使用Patch,您可以将您的更改发送给其他人进行审核或协作,以及在不同的Git仓库或版本控制系统之间导出或导入更改。 在Git中,使用以下命令来创建和应用Patch: 1、创建Pat

    2024年02月14日
    浏览(30)
  • 【Shell 命令集合 文件管理】Linux 补丁文件应用命令 patch命令使用指南

    Shell 命令专栏:Linux Shell 命令全解析 在Linux中, patch 命令用于将补丁文件应用到源代码文件中,从而实现对源代码的修改。 patch 命令的详细描述如下: patch 命令用于将补丁文件应用到源代码文件中,以实现对源代码的修改。补丁文件通常是由开发者或者社区提供的,用于修

    2024年02月09日
    浏览(44)
  • git补丁操作:git生成patch和应用patch

    一、生成patch 1、拉取代码仓 2、在clone到本地的代码目录中,例如对README.md文件进行了修改。然后使用 git status 命令查看工作目录和暂存区的状态。   (示例修改是在README.md文件开头添加了如下内容)   3、生成patch   查看README.patch的内容(可以用Notepad++)   二、应用patch

    2024年02月12日
    浏览(43)
  • python的猴子补丁(Monkey Patching)

    Python是一种典型的动态脚本语言。它不仅具有 动态类型(dynamic type) ,而且它的 对象模型(object model) 也是动态的。Python的类是可变的(mutable),方法(methods)只是类的属性(attributes);这允许我们在 运行时(run time) 修改其行为。这被称为猴子补丁(Monkey Patching), 它指的是偷偷地更改

    2024年02月02日
    浏览(37)
  • 构建patch补丁并提交git和rpm软件包验证

    目录 一:建立patch补丁和提交git 二.rpm软件包验证 进入项目页面,复制ssh链接,git clone到本地 例如: 在根目录创建rpmbuild文件夹,并在内创建SPEC和SOURCES文件: 将项目中的.spec文件拷贝到SPEC文件夹中,将项目的所有文件拷贝到SOURCES文件中: 例如,项目文件夹名为proj: 进入

    2024年02月10日
    浏览(26)
  • vue-package.json中的dependencies(生产依赖)和devDependencies(开发依赖)

     以下所有安装命令都会对node_modules生效,即安装都会安装到node_modules中,删除也会中从node_modules中删除 1、不会添加到package.json中 2、会添加到package.json的dependencies中 ,build时会打进去, 3、会添加到package.json的devDependencies中   参考package.json中的dependencies(生产依赖)和devD

    2024年02月13日
    浏览(35)
  • Linux patch命令教程:如何在Linux中应用和创建补丁(附实例详解和注意事项)

    patch 命令在Linux和其他类Unix操作系统中,用于将一个文件的修改应用到另一个文件。这个命令可以读取一个补丁文件,并使用其中的内容作为一组指令。通过遵循这些指令,修改后的文件中的更改可以在原始文件中复制。 patch 命令在大多数Linux发行版中都是可用的,包括Deb

    2024年04月13日
    浏览(33)
  • Vue 3中引入SCSS和LESS依赖的教程指南

    在Vue 3中,我们可以方便地引入SCSS(Sass)和LESS预处理器来增强CSS的功能和可维护性。本文将介绍在Vue 3项目中使用SCSS和LESS的基本步骤和注意事项,包括安装依赖、配置构建工具、使用样式文件等。通过学习本指南,您将能够轻松地在Vue 3项目中引入和使用SCSS和LESS。 引入S

    2024年02月09日
    浏览(48)
  • 20230822 Windows上使用find_package引入OpenCV报错

    打开Cmake项目时,find_package 报错: 大概率原项目是在 Linux 上开发的,Linux 上安装的 OpenCV 默认添加到了系统环境里,所以可以直接使用,但是 Windows 上的系统环境变量里没有OpenCV导致的 有两种解决方案 1. 将 OpenCV 添加到系统环境变量中 将 OpenCV 添加到系统环境变量里,这样

    2024年02月11日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包