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

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

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中 版本号详解

猜你喜欢

转载自blog.csdn.net/ZYS10000/article/details/130448923