在當(dāng)今的前端工程化領(lǐng)域，第三方庫的使用已經(jīng)成為標(biāo)配。然而，不可避免的是，這些庫可能會存在bug，或者是庫的一些功能并不能滿足需要，需要修改庫的某個功能，或添加功能。當(dāng)遇到這種情況時，我們應(yīng)該如何應(yīng)對？本文將介紹三種解決第三方庫bug的方法，并重點(diǎn)介紹使用patch-package庫來修復(fù)bug的全過程。

方法一：提issues給第三方庫的作者，讓作者修復(fù)

這個方式是比較常見的解決方式了，但有幾個缺點(diǎn)：

• 庫作者不維護(hù)這個庫了，那提issues自然就沒有人close了，gg
• 庫作者很忙，或者項目缺乏活躍的貢獻(xiàn)者，導(dǎo)致問題可能長時間都不懂響應(yīng)，那如果你這個項目很急的話，那gg
• bug或者功能的優(yōu)先級不高，庫作者先解決其他高優(yōu)先級的，或者他不接受你的建議或者及時修復(fù)問題，那gg
• 還有可能出現(xiàn)的溝通成本，以確保庫作者完全理解了問題的本質(zhì)和重要性。

那如果庫作者很勤奮，每天都在維護(hù)，對issues的問題，都滿懷熱情的進(jìn)行解決，那我們可以按照以下流程進(jìn)行提issues：

1. 發(fā)現(xiàn)bug：在使用第三方庫時，發(fā)現(xiàn)了一個bug。

2. 復(fù)現(xiàn)bug：在本地環(huán)境中嘗試復(fù)現(xiàn)該bug，并記錄詳細(xì)的復(fù)現(xiàn)步驟。

3. 提交issues：訪問第三方庫的GitHub倉庫，點(diǎn)擊“New issue”按鈕，填寫以下信息：

• 標(biāo)題：簡潔地描述bug現(xiàn)象。
• 描述：詳細(xì)描述bug的復(fù)現(xiàn)步驟、預(yù)期結(jié)果和實際結(jié)果。
• 環(huán)境：列出你的操作系統(tǒng)、瀏覽器版本、庫的版本等信息。

4. 等待回復(fù)：作者可能會要求你提供更多信息，或者告訴你解決方案。耐心等待并積極配合。nice

方法二：fork第三方庫，修復(fù)好bug后，發(fā)布到npm，項目下載自己發(fā)布的npm包

這個方式也有局限性：

1. 維護(hù)負(fù)擔(dān)：一旦你fork了庫，你需要負(fù)責(zé)維護(hù)這個分支，包括合并上游的更新和修復(fù)新出現(xiàn)的bug。
2. 長期兼容性：隨著時間的推移，原庫和新fork的庫可能會出現(xiàn)分歧，使得合并更新變得更加困難。
3. 版本管理：需要管理自己發(fā)布的npm包版本，確保它與其他依賴的兼容性。
4. 社區(qū)隔離：使用自己的fork可能會減少與原社區(qū)的合作機(jī)會，錯過原庫的其他改進(jìn)和特性。

那如果你覺得這個方式很不錯，那最佳實踐是這樣的：

步驟 1: Fork 原始庫

1. 訪問原始庫的GitHub頁面。
2. 點(diǎn)擊頁面上的“Fork”按鈕，將庫復(fù)制到你的GitHub賬戶下。

步驟 2: 克隆你的Fork

git clone https://github.com/your-username/original-repo.git
cd original-repo

步驟 3: 設(shè)置上游倉庫

git remote add upstream https://github.com/original-owner/original-repo.git

這樣當(dāng)作者更新維護(hù)庫的時候，可以獲取上游倉庫的最新更新。

步驟 4: 創(chuàng)建特性分支

git checkout -b fix-bug-branch

步驟 5: 修復(fù)Bug

在這個分支上，進(jìn)行必要的代碼更改來修復(fù)bug。

步驟 6: 測試更改

在本地環(huán)境中測試你的更改，確保修復(fù)了bug并且沒有引入新的問題。

步驟 7: 提交并推送更改

git add .
git commit -m "Fix bug description"
git push origin fix-bug-branch

步驟 8: 創(chuàng)建Pull Request（可選）

如果你希望原始庫接受你的修復(fù)，可以向上游倉庫創(chuàng)建一個Pull Request。

步驟 9: 發(fā)布到NPM

如果原始庫沒有接受你的PR，或者你需要立即使用修復(fù)，可以發(fā)布到NPM：

1. 登錄到NPM。

npm login

這個地方有個坑點(diǎn)，就是你使用了npm鏡像需要將鏡像更改為npm官方倉庫：

npm config set registry https://registry.npmjs.org

2. 修改package.json中的名稱，避免與原始庫沖突，例如添加你的用戶名前綴。

{
  "name": "@your-username/original-repo",
  // ...
}

3. 更新版本號。

npm version patch

4. 發(fā)布到NPM。

npm publish

步驟 10: 在你的項目中使用Forked庫

在你的項目package.json中，將依賴項更改為你的forked版本。

{
  "dependencies": {
    "original-repo": "^1.0.0",
    "@your-username/original-repo": "1.0.1"
  }
}

步驟 11: 維護(hù)你的Fork

定期從上游倉庫合并更新到你的fork，以保持與原始庫的同步。

git checkout master
git pull upstream master
git push origin master

最佳實踐總結(jié)

• 保持與上游倉庫的同步。
• 清晰地記錄你的更改和發(fā)布。
• 為你的fork創(chuàng)建文檔，說明它與原始庫的區(qū)別。
• 考慮長期維護(hù)策略，如果可能，盡量回歸到官方版本。

方法三：使用patch-package庫來修復(fù)

patch-package 是一個非常有用的 npm 包，它允許我們在沒有修改原始 npm 依賴包的情況下，對 npm 依賴進(jìn)行修復(fù)或自定義。這在以下場景中特別有用：

• 當(dāng)你發(fā)現(xiàn)一個第三方庫的 bug，但作者還沒有修復(fù)它，或者修復(fù)后的版本尚未發(fā)布。
• 當(dāng)你需要對第三方庫進(jìn)行微小的定制，而不想維護(hù)一個完整的分支或分叉。

patch-package 的工作原理

patch-package 的工作流程通常如下：

1. 修改 node_modules 中的依賴包文件。
2. 運(yùn)行 patch-package 命令，它會生成一個補(bǔ)丁文件，通常是 .patch 文件，保存在項目根目錄下的 patches 文件夾中。
3. 在 package.json 的 scripts 部分添加一個腳本來應(yīng)用這些補(bǔ)丁，通常是在 postinstall 階段。
4. 將生成的 .patch 文件提交到版本控制系統(tǒng)中。
5. 當(dāng)其他開發(fā)者運(yùn)行 npm install 或 yarn 安裝依賴時，或者 CI/CD 系統(tǒng)構(gòu)建項目時，這些補(bǔ)丁會被自動應(yīng)用。

但使用這種方式也有前提：

1. 潛在沖突：如果第三方庫的官方更新解決了相同的bug，但采用了不同的方法，那么你的補(bǔ)丁可能會與這些更新沖突

2. 庫沒有源碼：這種方式是在node_modules里對應(yīng)的包進(jìn)行修改，如果包是壓縮后的，那就沒辦法改了，所以只能針對node_modules里的包有源碼的情況下。

最佳實踐：

步驟 1：安裝patch-package postinstall-postinstall

postinstall-postinstall，作用是 postinstall 腳本在 Yarn 安裝過程中運(yùn)行。

yarn add patch-package postinstall-postinstall --dev

步驟 2：配置 package.json

在你的 package.json 文件中，添加一個 postinstall 腳本來確保在安裝依賴后應(yīng)用補(bǔ)丁：

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

步驟 3：修復(fù)依賴包中的 bug

假如vue3有個bug，我們直接在 node_modules/vue/xxx 中修復(fù)這個 bug。

步驟 4：創(chuàng)建補(bǔ)丁

修復(fù)完成后，我們運(yùn)行以下命令來生成補(bǔ)丁：

npx patch-package example-lib

這會在項目根目錄下創(chuàng)建一個 patches 文件夾，并在其中生成一個名為 vue+3.4.29.patch 的文件（假設(shè)vue當(dāng)前庫的版本是3.4.29）。

步驟 5：提交補(bǔ)丁文件到代碼庫中

現(xiàn)在，我們將 patches 文件夾和里面的 .patch 文件提交到版本控制系統(tǒng)中。

git add patches/example-lib+1.0.0.patch
git commit -m "Add patch for vue3.4.29"
git push

步驟 6：安裝依賴并應(yīng)用補(bǔ)丁

就是其他同事在下載項目或者更新依賴后，postinstall 腳本會自動運(yùn)行，并應(yīng)用補(bǔ)丁。

npm install
# 或者
yarn install

當(dāng) npm install 或 yarn install 完成后，patch-package 會自動檢測 patches 文件夾中的補(bǔ)丁，并將其應(yīng)用到對應(yīng)的依賴上。

志哥我想說

遇到第三方庫的bug時，我們可以選擇提issues、fork并發(fā)布自己的npm包，或者使用patch-package進(jìn)行本地修復(fù)。當(dāng)然你還可以有：

• 使用替代庫
• 社區(qū)支持

每種方法都有其適用場景，根據(jù)實際情況選擇最合適的方法。希望本文能幫助你更好地應(yīng)對第三方庫的bug問題，或者面試或者技術(shù)分享等。

本文來源于稀土掘金技術(shù)社區(qū)，作者：_志哥_

原文鏈接：https://juejin.cn/post/7418797840796254271