Vue中引入使用patch-package為依賴打補(bǔ)丁問(wèn)題
1. patch-package 簡(jiǎn)介
npm i patch-package
如果不需要在生產(chǎn)中運(yùn)行 npm (如：正在制作 web 前端，則可使用 --save dev）
1.1 使用方法
制作修補(bǔ)程序
首先更改 node_modules 文件夾中特定包的文件，然后運(yùn)行
yarn patch-package package-name
或使用 npx （npm > 5.2）
npx patch-package package-name
package-name 與所更改的程序包的名稱(chēng)相匹配；
如果是第一次使用補(bǔ)丁包，會(huì)在應(yīng)用程序根目錄中創(chuàng)建一個(gè)名為補(bǔ)丁的文件夾。
里面會(huì)有一個(gè)名為 package name+0.44.0.patch 之類(lèi)的文件，這是普通舊包名和固定版本之間的差異。
提交此項(xiàng)以與您的團(tuán)隊(duì)共享修復(fù)。
| 可選項(xiàng) | 描述 |
|---|---|
| –create-issue | 對(duì)于源代碼托管在 GitHub 上的包，此選項(xiàng)會(huì)打開(kāi)一個(gè) web 瀏覽器，其中包含基于差異的草稿問(wèn)題。 |
| –use-yarn | 默認(rèn)情況下，修補(bǔ)程序包會(huì)根據(jù)擁有的鎖定文件來(lái)檢查是使用 npm 還是 yarn。如果兩者都有，則默認(rèn)情況下使用 npm。設(shè)置此選項(xiàng)以覆蓋該默認(rèn)設(shè)置并始終使用紗線。 |
| –exclude < regexp > | 創(chuàng)建修補(bǔ)程序文件時(shí)，忽略與 regexp 匹配的路徑。路徑是相對(duì)于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：package\.json$ |
| –include < regexp > | 創(chuàng)建修補(bǔ)程序文件時(shí)，只考慮與 regexp 匹配的路徑。路徑是相對(duì)于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：*。 |
| –case-sensitive-path-filtering | 使 --include 或 --exclude 篩選器中使用的 regexp 區(qū)分大小寫(xiě)。 |
| –patch-dir | 指定要放置修補(bǔ)程序文件的目錄的名稱(chēng)。 |
嵌套的程序包
如果試圖在特定處修補(bǔ)包，如：node_modules/package/node_modules/另一個(gè)包，只需在包名稱(chēng)之間加一個(gè) / 即可：
npx patch-package package/another-package
它也適用于作用域包
npx patch-package @my/package/@my/other-package
2. 修改 vue-pdf 打包后 [hash].worker.js 路徑問(wèn)題
注意：本文 vue-pdf 版本為 ^4.3.0；
vue-pdf 插件中 [hash].worker.js 的默認(rèn)打包路徑是在 dist 根目錄下
因項(xiàng)目部署系統(tǒng)原因，需將 [hash].worker.js 文件移入 dist/static/js 目錄內(nèi)。
2.1 修改文件
進(jìn)入目錄 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 創(chuàng)建補(bǔ)丁
npx patch-package worker-loader
運(yùn)行后會(huì)在項(xiàng)目根目錄下的 patches 目錄中創(chuàng)建一個(gè)名為 worker-loader+2.0.0.patch 的文件。
將該 patch 文件提交后，即可在之后應(yīng)用該補(bǔ)丁了。
2.4 添加指令
在 package.json 的 scripts 中加入 “postinstall”: “patch-package”
后續(xù)執(zhí)行 npm install 或 yarn install 命令時(shí)，會(huì)自動(dòng)為依賴包打補(bǔ)丁。
"scripts": {
"postinstall": "patch-package"
}
2.5 注意事項(xiàng)
要修改的依賴包版本最好是固定的，即不會(huì)自動(dòng)升級(jí)版本，這樣可以避免自動(dòng)升級(jí)后導(dǎo)致補(bǔ)丁包失效，從而打包失敗影響原有功能；
協(xié)同開(kāi)發(fā)的同學(xué)需要重新安裝一下依賴；
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目打包時(shí)自動(dòng)更新版本號(hào)的實(shí)現(xiàn)方法
本文主要介紹了vue項(xiàng)目打包時(shí)自動(dòng)更新版本號(hào)的實(shí)現(xiàn)方法,通過(guò)在根目錄下創(chuàng)建autoVersion.js腳本文件,頁(yè)面獲取版本號(hào)時(shí)直接使用,修改package.json配置,感興趣的可以了解一下2025-02-02
在 Vue 中,我們常通過(guò) emit 自定義事件實(shí)現(xiàn)父子組件通信（子組件觸發(fā)事件、父組件監(jiān)聽(tīng)）,也可借助 eventBus 事件總線完成任意組件間的通信,下文將說(shuō)明 emit 自定義事件在同步、異步邏輯下的返回值獲取方式,需要的朋友可以參考下2025-12-12
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2024-02-02
Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開(kāi)發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來(lái)學(xué)習(xí)一下Vue中常見(jiàn)組合式API的使用吧2023-11-11
當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形,下面通過(guò)本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue項(xiàng)目在打包時(shí),如何去掉所有的console.log輸出
這篇文章主要介紹了vue項(xiàng)目在打包時(shí),如何去掉所有的console.log輸出，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04