想想我們在使用第三方依賴包時如果遇到了bug，通常解決的方式都是繞過這個問題，使用其他方式解決，較為麻煩?；蛘呓o作者提個issue，然后等待作者的修復(fù)，等待的時間不可控。那么這時候就可以借助patch-package自己動手去修復(fù)該bug，感覺是不是很棒，并且還可以在第三方依賴包上，根據(jù)業(yè)務(wù)需求擴(kuò)展能力。
當(dāng)然最好還是擴(kuò)展一些通用性比較高的能力，如果是比較通用且該能力大多數(shù)開發(fā)者都有這種訴求的話可以給第三方依賴包提個PR。參與開源項(xiàng)目是不是簡單了起來了～（不要在魔改的路上越走越遠(yuǎn)）
使用步驟
Step1: 安裝
// 使用npm安裝
npm i patch-package
// 使用yarn安裝
yarn add patch-package postinstall-postinstall
為什么要使用yarn安裝，需要多安裝postinstall-postinstall這個依賴，有興趣可以看官方解釋 Why use postinstall-postinstall
Step2：修改package.json
package.json的scripts中聲明了一系列的npm腳本命令，如下：（參考資料：npm-scripts）
- prepublish: 在包發(fā)布之前運(yùn)行，也會在npm install安裝到本地時運(yùn)行
- publish,postpublish: 包被發(fā)布之后運(yùn)行
- preinstall: 包被安裝前運(yùn)行
- install,postinstall: 包被安裝后運(yùn)行
- preuninstall,uninstall: 包被卸載前運(yùn)行
- postuninstall: 包被卸載后運(yùn)行
- preversion: bump包版本前運(yùn)行
- postversion: bump包版本后運(yùn)行
- pretest,test,posttest: 通過npm test命令運(yùn)行
- prestop,stop,poststop: 通過npm stop命令運(yùn)行
- prestart,start,poststart: 通過npm start命令運(yùn)行
- prerestart,restart,postrestart: 通過npm restart運(yùn)行
可以看到依賴包在安裝完之后會執(zhí)行postinstall命令
所以我們在package.json的scripts里面增加："postinstall": "patch-package"
"scripts": {
***,
+ "postinstall": "patch-package"
}
Step3：修改依賴包源碼
在項(xiàng)目的node_modules 找到要修改的依賴包， 例如（resize-observer-polyfill）：
Step4: 生成補(bǔ)丁
yarn patch-package package-name(修改的包名)
或者
npx patch-package package-name（npm版本 > 5.2）
patch-package 6.4.7
? Creating temporary folder
? Installing resize-observer-polyfill@1.5.1 with yarn
? Diffing your files with clean files
? Created file patches/resize-observer-polyfill+1.5.1.patch
?? resize-observer-polyfill is on GitHub! To draft an issue based on your patch run
yarn patch-package resize-observer-polyfill --create-issue
可以看到patch-package已經(jīng)為我們創(chuàng)建了一個補(bǔ)丁。
默認(rèn)會在我們的根目錄下創(chuàng)建一個patches文件夾。在patches文件夾下會創(chuàng)建依賴包名+版本號.patch的文件，文件描述了我們修改了什么，第幾行，有點(diǎn)像git的提交記錄
Step5: 測試補(bǔ)丁是否有效
手動刪除node_modules文件夾，重新執(zhí)行npm install安裝依賴包?？梢钥吹皆谝蕾嚢惭b結(jié)束后執(zhí)行了patch-package命令，之前生成的補(bǔ)丁被應(yīng)用了
patch-package 6.4.7
Applying patches...
resize-observer-polyfill@1.5.1 ?
Done in 177.35s.
查看node-modules中之前修改的resize-observer-polyfill 修改的地方，查看之前修改的代碼是否還存在。如果之前修改的代碼還存在，說明補(bǔ)丁文件已經(jīng)生效了，如果不存在，排查下是否哪個步驟出現(xiàn)了問題。
最后將patches文件夾推送到遠(yuǎn)端倉庫，日后無論是誰拉取代碼，安裝依賴，我們之前修改的部分都會生效的
注意事項(xiàng)
patch是鎖定版本號的，如果升級了版本，patch內(nèi)容將會失效，最好在package.json能夠鎖定版本號。
魔改的同時，也局限了升級的能力，盡量還是去提issue和PR。
