一、背景
vue項目中使用 vue-pdf 第三方插件預(yù)覽pdf,書寫業(yè)務(wù)代碼完美運行,pdf文件內(nèi)容正常預(yù)覽無問題。后期需求有變,業(yè)務(wù)需求增加電子簽章功能。這個時候pdf文件的內(nèi)容可以顯示出來,但是公司的電子簽章無法顯示。這令人沮喪,因為已經(jīng)編寫了許多特定于此依賴項的代碼,如果替換依賴庫,這些代碼很可能會被浪費。更重要的是其已經(jīng)在生產(chǎn)環(huán)境運行。
在不更改依賴庫進(jìn)行大改動的前提下,先查找問題所在。經(jīng)查發(fā)現(xiàn)此為官方bug 無法顯示簽章。進(jìn)一步查詢發(fā)現(xiàn)根源是其依賴包 pdf.js 的 電子簽章不顯示。
問題已定位到,要修改顯示電子簽章的代碼是在node_modules的依賴包中。
如何解決此問題?
二、常用方法
1. 給依賴包提 issue 等待他人修復(fù)并發(fā)布
2. 給依賴包提 pr 自行修復(fù)并等待發(fā)布
3. 整體copy項目法
直接引用法
直接copy依賴包的源碼,本地引用,不再通過npm包方式引用
發(fā)布私庫法
適合多項目中使用同一個依賴包的場景,可以把修改后的源碼發(fā)布到私有的倉庫上
4. 修改引用法
配置一個webpack alias別名,如'原始文件的引用路徑': '修改后文件的引用路徑',使得最終修改后的文件被引用,如:
resolve: { alias: { 'pdfjs': path.resolve(__dirname, './patched/pdfjs/*'), } }
以上方法均有弊端:
前兩種修復(fù)周期很長且依賴第三方,修復(fù)時間不定,不適合解決當(dāng)前問題。
后幾種方法都比較復(fù)雜,并且會導(dǎo)致項目臃腫,更容易忘記自己修改了源碼的哪個部分,而且更新麻煩,每次都需要手動去更新代碼,無法與插件同步更新。
有沒有一種方法,可以優(yōu)雅修改node_modules的源碼?
三、patch-package
?patch-package 讓程序開發(fā)者立即修復(fù)并保留 npm 依賴項。是一個給依賴項打補(bǔ)丁的完美方案。
# fix a bug in one of your dependencies vim node_modules/some-package/brokenFile.js # run patch-package to create a .patch file npx patch-package some-package # commit the patch file to share the fix with your team git add patches/some-package+3.14.15.patch git commit -m "fix brokenFile.js in some-package"
使用方法:
1.安裝
npm i patch-package
如果你不需要在生產(chǎn)中運行
npm i patch-package --save-dev
yarn、pnpm、docker安裝命令可查看其 git官網(wǎng)。?
2. 修改npm包
更改node_modules 文件夾中要修改依賴包的文件
3. 生成補(bǔ)丁
npx patch-package package-name
4. 添加自動執(zhí)行命令
In package.json
"scripts": { + "postinstall": "patch-package" }
在本文示例中,在node_modules找到要修改的依賴包pdfjs-dist,修改代碼如下:
??
執(zhí)行npx patch-package pdfjs-dist,生成補(bǔ)丁,會在文件目錄中生成一個patches文件夾,如下:
??
至此項目中的bug已修復(fù),如何讓更改內(nèi)容在團(tuán)隊其他同事拉取代碼后執(zhí)行?
添加自執(zhí)行命令如下,會在 npm install 后知執(zhí)行。
??
patch文件是什么?
其實就是一些git diff記錄描述。
原理: patch-package會將當(dāng)前 node_modules下的源碼與原始源碼進(jìn)行 git diff,并在項目根目錄下生成一個patch補(bǔ)丁文件。
如何自測補(bǔ)丁是否生效?
手動刪除項目中的node_modules,并重新執(zhí)行npm install命令安裝依賴包。安裝成功后查看之前修改的 node_modules 依賴包中的文件,查看修改的代碼是否依然存在,如果之前修改代碼依然存在即表明補(bǔ)丁文件已經(jīng)生效,如果你之前修改的代碼不存在即表明補(bǔ)丁文件沒有生效。
四、patch-package 好處
版本預(yù)檢
當(dāng)依賴項發(fā)生更改時,會以紅色大寫字母通知,需要檢查所做修復(fù)是否仍然有效。npx patch-package 會直接報錯**ERROR** Failed to apply patch for package xxxx at path,通過提示可以更方便定位問題。
節(jié)省空間
無需拷貝一份源碼,使用git diff來記錄補(bǔ)丁更節(jié)省空間,安全又便捷。
可審查
補(bǔ)丁可以作為正常審查過程的一部分進(jìn)行審查。
五、注意事項
?直接修改 node_modules 下的代碼不是被推薦的做法,應(yīng)該僅在應(yīng)急情況下考慮
?長期還是需要徹底修復(fù)第三方包缺陷并逐步移除項目中的 .patch 文件
審核編輯 黃宇
-
源碼
+關(guān)注
關(guān)注
8文章
629瀏覽量
29074
發(fā)布評論請先 登錄
相關(guān)推薦
評論