Vue中引入使用patch-package为依赖打补丁问题

 更新时间:2024年03月11日 17:00:31   作者:明天也要努力  
这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. patch-package 简介

patch-package npm地址

patch-package github文档

npm i patch-package

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

1.1 使用方法

制作修补程序

首先更改 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 注意事项

要修改的依赖包版本最好是固定的,即不会自动升级版本,这样可以避免自动升级后导致补丁包失效,从而打包失败影响原有功能;

协同开发的同学需要重新安装一下依赖;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nuxt3项目中问题汇总之刷新页面useFetch无返回解决

    Nuxt3项目中问题汇总之刷新页面useFetch无返回解决

    Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架,这篇文章主要给大家介绍了关于Nuxt3项目中问题汇总之刷新页面useFetch无返回解决办法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • VUE element-ui 写个复用Table组件的示例代码

    VUE element-ui 写个复用Table组件的示例代码

    本篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 开发一个Parcel-vue脚手架工具(详细步骤)

    开发一个Parcel-vue脚手架工具(详细步骤)

    这篇文章主要介绍了开发一个Parcel-vue脚手架工具(详细步骤),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue进度条组件实现代码(可拖拽可点击)

    vue进度条组件实现代码(可拖拽可点击)

    在日常开发中随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,这篇文章主要给大家介绍了关于vue进度条组件实现(可拖拽可点击)的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue3 数组清空与重新赋值的操作代码

    vue3 数组清空与重新赋值的操作代码

    这篇文章主要介绍了vue3 数组清空与重新赋值的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue实现数值型输入框并限制长度

    Vue实现数值型输入框并限制长度

    这篇文章主要介绍了Vue实现数值型输入框并限制长度,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • elementPuls 表格反选实现示例代码

    elementPuls 表格反选实现示例代码

    这篇文章主要介绍了elementPuls 表格反选实现示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • 装饰者模式在日常开发中的缩影和vue中的使用详解

    装饰者模式在日常开发中的缩影和vue中的使用详解

    这篇文章主要为大家介绍了装饰者模式在日常开发中的缩影和vue中的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue 父组件通过v-model接收子组件的值的代码

    vue 父组件通过v-model接收子组件的值的代码

    这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论