在當今的前端工程化領域，第三方庫的使用已經(jīng)成為標配。然而，不可避免的是，這些庫可能會存在bug，或者是庫的一些功能并不能滿足需要，需要修改庫的某個功能，或添加功能。當遇到這種情況時，我們應該如何應對？本文將介紹三種解決第三方庫bug的方法，并重點介紹使用patch-package庫來修復bug的全過程。
方法一：提issues給第三方庫的作者，讓作者修復
這個方式是比較常見的解決方式了，但有幾個缺點：
- 庫作者不維護這個庫了，那提issues自然就沒有人close了，gg
- 庫作者很忙，或者項目缺乏活躍的貢獻者，導致問題可能長時間都不懂響應，那如果你這個項目很急的話，那gg
- bug或者功能的優(yōu)先級不高，庫作者先解決其他高優(yōu)先級的，或者他不接受你的建議或者及時修復問題，那gg
- 還有可能出現(xiàn)的溝通成本，以確保庫作者完全理解了問題的本質和重要性。
那如果庫作者很勤奮，每天都在維護，對issues的問題，都滿懷熱情的進行解決，那我們可以按照以下流程進行提issues：
發(fā)現(xiàn)bug：在使用第三方庫時，發(fā)現(xiàn)了一個bug。
復現(xiàn)bug：在本地環(huán)境中嘗試復現(xiàn)該bug，并記錄詳細的復現(xiàn)步驟。
提交issues：訪問第三方庫的GitHub倉庫，點擊“New issue”按鈕，填寫以下信息：
- 描述：詳細描述bug的復現(xiàn)步驟、預期結果和實際結果。
- 環(huán)境：列出你的操作系統(tǒng)、瀏覽器版本、庫的版本等信息。
等待回復：作者可能會要求你提供更多信息，或者告訴你解決方案。耐心等待并積極配合。nice
方法二：fork第三方庫，修復好bug后，發(fā)布到npm，項目下載自己發(fā)布的npm包
這個方式也有局限性：
- 維護負擔：一旦你fork了庫，你需要負責維護這個分支，包括合并上游的更新和修復新出現(xiàn)的bug。
- 長期兼容性：隨著時間的推移，原庫和新fork的庫可能會出現(xiàn)分歧，使得合并更新變得更加困難。
- 版本管理：需要管理自己發(fā)布的npm包版本，確保它與其他依賴的兼容性。
- 社區(qū)隔離：使用自己的fork可能會減少與原社區(qū)的合作機會，錯過原庫的其他改進和特性。
那如果你覺得這個方式很不錯，那最佳實踐是這樣的：
步驟 1: Fork 原始庫
- 點擊頁面上的“Fork”按鈕，將庫復制到你的GitHub賬戶下。
步驟 2: 克隆你的Fork
git clone https://github.com/your-username/original-repo.git
cd original-repo
步驟 3: 設置上游倉庫
git remote add upstream https://github.com/original-owner/original-repo.git
這樣當作者更新維護庫的時候，可以獲取上游倉庫的最新更新。
步驟 4: 創(chuàng)建特性分支
git checkout -b fix-bug-branch
步驟 5: 修復Bug
在這個分支上，進行必要的代碼更改來修復bug。
步驟 6: 測試更改
在本地環(huán)境中測試你的更改，確保修復了bug并且沒有引入新的問題。
步驟 7: 提交并推送更改
git add .
git commit -m "Fix bug description"
git push origin fix-bug-branch
步驟 8: 創(chuàng)建Pull Request（可選）
如果你希望原始庫接受你的修復，可以向上游倉庫創(chuàng)建一個Pull Request。
步驟 9: 發(fā)布到NPM
如果原始庫沒有接受你的PR，或者你需要立即使用修復，可以發(fā)布到NPM：
npm login
這個地方有個坑點，就是你使用了npm鏡像需要將鏡像更改為npm官方倉庫：
npm config set registry https://registry.npmjs.org
- 修改
package.json中的名稱，避免與原始庫沖突，例如添加你的用戶名前綴。
{
"name": "@your-username/original-repo",
// ...
}
npm version patch
npm publish
步驟 10: 在你的項目中使用Forked庫
在你的項目package.json中，將依賴項更改為你的forked版本。
{
"dependencies": {
"original-repo": "^1.0.0",
"@your-username/original-repo": "1.0.1"
}
}
步驟 11: 維護你的Fork
定期從上游倉庫合并更新到你的fork，以保持與原始庫的同步。
git checkout master
git pull upstream master
git push origin master
最佳實踐總結
- 為你的fork創(chuàng)建文檔，說明它與原始庫的區(qū)別。
方法三：使用patch-package庫來修復
patch-package 是一個非常有用的 npm 包，它允許我們在沒有修改原始 npm 依賴包的情況下，對 npm 依賴進行修復或自定義。這在以下場景中特別有用：
- 當你發(fā)現(xiàn)一個第三方庫的 bug，但作者還沒有修復它，或者修復后的版本尚未發(fā)布。
- 當你需要對第三方庫進行微小的定制，而不想維護一個完整的分支或分叉。
patch-package 的工作原理
patch-package 的工作流程通常如下：
- 運行
patch-package 命令，它會生成一個補丁文件，通常是 .patch 文件，保存在項目根目錄下的 patches 文件夾中。 - 在
package.json 的 scripts 部分添加一個腳本來應用這些補丁，通常是在 postinstall 階段。 - 將生成的
.patch 文件提交到版本控制系統(tǒng)中。 - 當其他開發(fā)者運行
npm install 或 yarn 安裝依賴時，或者 CI/CD 系統(tǒng)構建項目時，這些補丁會被自動應用。
但使用這種方式也有前提：
1. 潛在沖突：如果第三方庫的官方更新解決了相同的bug，但采用了不同的方法，那么你的補丁可能會與這些更新沖突
2. 庫沒有源碼：這種方式是在node_modules里對應的包進行修改，如果包是壓縮后的，那就沒辦法改了，所以只能針對node_modules里的包有源碼的情況下。
最佳實踐：
步驟 1：安裝patch-package postinstall-postinstall
postinstall-postinstall，作用是 postinstall 腳本在 Yarn 安裝過程中運行。
yarn add patch-package postinstall-postinstall --dev
步驟 2：配置 package.json
在你的 package.json 文件中，添加一個 postinstall 腳本來確保在安裝依賴后應用補丁：
"scripts": {
"postinstall": "patch-package"
}
步驟 3：修復依賴包中的 bug
假如vue3有個bug，我們直接在 node_modules/vue/xxx 中修復這個 bug。
步驟 4：創(chuàng)建補丁
修復完成后，我們運行以下命令來生成補丁：
npx patch-package example-lib
這會在項目根目錄下創(chuàng)建一個 patches 文件夾，并在其中生成一個名為 vue+3.4.29.patch 的文件（假設vue當前庫的版本是3.4.29）。
步驟 5：提交補丁文件到代碼庫中
現(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：安裝依賴并應用補丁
就是其他同事在下載項目或者更新依賴后，postinstall 腳本會自動運行，并應用補丁。
npm install
# 或者
yarn install
當 npm install 或 yarn install 完成后，patch-package 會自動檢測 patches 文件夾中的補丁，并將其應用到對應的依賴上。
志哥我想說
遇到第三方庫的bug時，我們可以選擇提issues、fork并發(fā)布自己的npm包，或者使用patch-package進行本地修復。當然你還可以有：
每種方法都有其適用場景，根據(jù)實際情況選擇最合適的方法。希望本文能幫助你更好地應對第三方庫的bug問題，或者面試或者技術分享等。
本文來源于稀土掘金技術社區(qū)，作者：_志哥_
原文鏈接：https://juejin.cn/post/7418797840796254271
該文章在 2024/9/29 12:09:01 編輯過
400 186 1886
