Vue中引入使用patch-package為依賴打補丁問題
1. patch-package 簡介
npm i patch-package
如果不需要在生產(chǎn)中運行 npm (如：正在制作 web 前端，則可使用 --save dev）
1.1 使用方法
制作修補程序
首先更改 node_modules 文件夾中特定包的文件，然后運行
yarn patch-package package-name
或使用 npx （npm > 5.2）
npx patch-package package-name
package-name 與所更改的程序包的名稱相匹配；
如果是第一次使用補丁包，會在應用程序根目錄中創(chuàng)建一個名為補丁的文件夾。
里面會有一個名為 package name+0.44.0.patch 之類的文件，這是普通舊包名和固定版本之間的差異。
提交此項以與您的團隊共享修復。
| 可選項 | 描述 |
|---|---|
| –create-issue | 對于源代碼托管在 GitHub 上的包，此選項會打開一個 web 瀏覽器，其中包含基于差異的草稿問題。 |
| –use-yarn | 默認情況下，修補程序包會根據(jù)擁有的鎖定文件來檢查是使用 npm 還是 yarn。如果兩者都有，則默認情況下使用 npm。設置此選項以覆蓋該默認設置并始終使用紗線。 |
| –exclude < regexp > | 創(chuàng)建修補程序文件時，忽略與 regexp 匹配的路徑。路徑是相對于要修補的程序包的根目錄的。默認值：package\.json$ |
| –include < regexp > | 創(chuàng)建修補程序文件時，只考慮與 regexp 匹配的路徑。路徑是相對于要修補的程序包的根目錄的。默認值：*。 |
| –case-sensitive-path-filtering | 使 --include 或 --exclude 篩選器中使用的 regexp 區(qū)分大小寫。 |
| –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 根目錄下
因項目部署系統(tǒng)原因，需將 [hash].worker.js 文件移入 dist/static/js 目錄內(nèi)。
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 創(chuàng)建補丁
npx patch-package worker-loader
運行后會在項目根目錄下的 patches 目錄中創(chuàng)建一個名為 worker-loader+2.0.0.patch 的文件。
將該 patch 文件提交后，即可在之后應用該補丁了。
2.4 添加指令
在 package.json 的 scripts 中加入 “postinstall”: “patch-package”
后續(xù)執(zhí)行 npm install 或 yarn install 命令時，會自動為依賴包打補丁。
"scripts": {
"postinstall": "patch-package"
}
2.5 注意事項
要修改的依賴包版本最好是固定的，即不會自動升級版本，這樣可以避免自動升級后導致補丁包失效，從而打包失敗影響原有功能；
協(xié)同開發(fā)的同學需要重新安裝一下依賴；
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)簡易圖片左右旋轉,上一張,下一張組件案例
這篇文章主要介紹了vue實現(xiàn)簡易圖片左右旋轉,上一張,下一張組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了基于vue實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關于Less在Vue中的使用方法,需要的朋友可以參考下2023-10-10
element el-table表格的二次封裝實現(xiàn)(附表格高度自適應)
這篇文章主要介紹了element el-table表格的二次封裝實現(xiàn)(附表格高度自適應)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了Vant實現(xiàn)上傳多個圖片或視頻,更改視頻預覽圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
下面小編就為大家分享一篇完美解決iview 的select下拉框選項錯位的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關知識,包括單個輸入框傳值和多個輸入框傳值,一個組件接受多個v-model值,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
過濾器，本質上就是一個函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進行處理，并返回一個數(shù)據(jù)結果。下面這篇文章主要給大家介紹了Vue.js中過濾器的相關資料,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
這篇文章主要給大家介紹了關于vue源碼之批量異步更新策略的相關資料，關于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，需要的朋友可以參考下2021-05-05