一、背景

vue項(xiàng)目中使用 vue-pdf 第三方插件預(yù)覽pdf，書(shū)寫(xiě)業(yè)務(wù)代碼完美運(yùn)行，pdf文件內(nèi)容正常預(yù)覽無(wú)問(wèn)題。后期需求有變，業(yè)務(wù)需求增加電子簽章功能。這個(gè)時(shí)候pdf文件的內(nèi)容可以顯示出來(lái)，但是公司的電子簽章無(wú)法顯示。這令人沮喪，因?yàn)橐呀?jīng)編寫(xiě)了許多特定于此依賴項(xiàng)的代碼，如果替換依賴庫(kù)，這些代碼很可能會(huì)被浪費(fèi)。更重要的是其已經(jīng)在生產(chǎn)環(huán)境運(yùn)行。

在不更改依賴庫(kù)進(jìn)行大改動(dòng)的前提下，先查找問(wèn)題所在。經(jīng)查發(fā)現(xiàn)此為官方bug 無(wú)法顯示簽章。進(jìn)一步查詢發(fā)現(xiàn)根源是其依賴包 pdf.js 的 電子簽章不顯示。

問(wèn)題已定位到，要修改顯示電子簽章的代碼是在node_modules的依賴包中。

如何解決此問(wèn)題？

二、常用方法

1. 給依賴包提 issue 等待他人修復(fù)并發(fā)布

2. 給依賴包提 pr 自行修復(fù)并等待發(fā)布

3. 整體copy項(xiàng)目法

直接引用法

直接copy依賴包的源碼，本地引用，不再通過(guò)npm包方式引用

發(fā)布私庫(kù)法

適合多項(xiàng)目中使用同一個(gè)依賴包的場(chǎng)景，可以把修改后的源碼發(fā)布到私有的倉(cāng)庫(kù)上

4. 修改引用法

配置一個(gè)webpack alias別名，如'原始文件的引用路徑': '修改后文件的引用路徑'，使得最終修改后的文件被引用，如：

resolve: {  
    alias: {  
        'pdfjs': path.resolve(__dirname, './patched/pdfjs/*'), 
    }
}

以上方法均有弊端：

前兩種修復(fù)周期很長(zhǎng)且依賴第三方，修復(fù)時(shí)間不定，不適合解決當(dāng)前問(wèn)題。

后幾種方法都比較復(fù)雜，并且會(huì)導(dǎo)致項(xiàng)目臃腫，更容易忘記自己修改了源碼的哪個(gè)部分，而且更新麻煩，每次都需要手動(dòng)去更新代碼，無(wú)法與插件同步更新。

有沒(méi)有一種方法，可以優(yōu)雅修改node_modules的源碼？

三、patch-package

?patch-package 讓程序開(kāi)發(fā)者立即修復(fù)并保留 npm 依賴項(xiàng)。是一個(gè)給依賴項(xiàng)打補(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)中運(yù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. 添加自動(dòng)執(zhí)行命令

In package.json

 "scripts": {
    +  "postinstall": "patch-package"
 }

在本文示例中，在node_modules找到要修改的依賴包pdfjs-dist，修改代碼如下：

??

執(zhí)行npx patch-package pdfjs-dist，生成補(bǔ)丁，會(huì)在文件目錄中生成一個(gè)patches文件夾，如下：

??

至此項(xiàng)目中的bug已修復(fù)，如何讓更改內(nèi)容在團(tuán)隊(duì)其他同事拉取代碼后執(zhí)行？

添加自執(zhí)行命令如下，會(huì)在 npm install 后知執(zhí)行。

??

patch文件是什么?

其實(shí)就是一些git diff記錄描述。

原理: patch-package會(huì)將當(dāng)前 node_modules下的源碼與原始源碼進(jìn)行 git diff，并在項(xiàng)目根目錄下生成一個(gè)patch補(bǔ)丁文件。

如何自測(cè)補(bǔ)丁是否生效？

手動(dòng)刪除項(xiàng)目中的node_modules，并重新執(zhí)行npm install命令安裝依賴包。安裝成功后查看之前修改的 node_modules 依賴包中的文件，查看修改的代碼是否依然存在，如果之前修改代碼依然存在即表明補(bǔ)丁文件已經(jīng)生效，如果你之前修改的代碼不存在即表明補(bǔ)丁文件沒(méi)有生效。

四、patch-package 好處

版本預(yù)檢

當(dāng)依賴項(xiàng)發(fā)生更改時(shí)，會(huì)以紅色大寫(xiě)字母通知，需要檢查所做修復(fù)是否仍然有效。npx patch-package 會(huì)直接報(bào)錯(cuò)**ERROR** Failed to apply patch for package xxxx at path，通過(guò)提示可以更方便定位問(wèn)題。

節(jié)省空間

無(wú)需拷貝一份源碼，使用git diff來(lái)記錄補(bǔ)丁更節(jié)省空間，安全又便捷。

可審查

補(bǔ)丁可以作為正常審查過(guò)程的一部分進(jìn)行審查。

五、注意事項(xiàng)

?直接修改 node_modules 下的代碼不是被推薦的做法，應(yīng)該僅在應(yīng)急情況下考慮

?長(zhǎng)期還是需要徹底修復(fù)第三方包缺陷并逐步移除項(xiàng)目中的 .patch 文件

審核編輯 黃宇