在我們通過cli創(chuàng)建的項目在項目根目錄下都會有一個 package.json 的文件，而我們通過在項目根目錄下執(zhí)行命令 npm install（或 npm i）安裝與 package.json 中相對應(yīng)的依賴包，而這些依賴包都在根目錄的?node_modules 文件中，一般情況情況下我們不會去修改?node_modules 依賴包中的源碼，但凡事總有例外，我們總會有各種各樣的原因需要改動依賴包中的源碼。
在寫本編文章之前我使用過以下兩種方式去修改??node_modules 中的源碼：
1、直接在 node_modules 中修改，但這有一個致命缺點，那就是每次 npm install 都需要再次手動修改一次，不能做到一勞永逸的效果，并且在團隊開發(fā)中也有諸多不便。
2、將需要修改的組件源碼拷貝到項目中單獨自己封裝一個組件，然后再引用。這樣做也有很多不便，比如自己單獨封裝組件既繁瑣又耗時，而且還會造成項目看起來比較臃腫。
以上這兩種方式弊端都比較明顯，且不易于維護，都是比較low方法，并且也是不建議使用的，下面就記錄一下我發(fā)現(xiàn)的一種較為高大上的一種方案，該方案操作簡單、便捷、且一勞永逸，該方法就是采用?patch-package?修改?node_modules 中的依賴包。
步驟一、通過命令安裝??patch-package
npm install patch-package --save-dev
步驟二、修改項目根目錄下的 package.json 文件
在 package.json 文件中的?scripts?中加入?"postinstall": "patch-package"
步驟三、手動修改?node_modules 依賴包中的源碼
將你需要修改的?node_modules 依賴包中源碼直接修改如下圖
步驟四、手動執(zhí)行命令創(chuàng)建 npx patch-package package-name 補丁文件
執(zhí)行命令：npx patch-package package-name
執(zhí)行該命令后會在項目根目錄中自動創(chuàng)建一個?patches 文件夾，該文件夾中就會出現(xiàn)一個?package-name+version.patch 的補丁文件。
其中命令中的?package-name 指的是被修改的依賴包的名字（不是被修改的文件的名字）
舉個例子：還是在 圖3-1 中我修改的是?@tarojs/components 組件依賴包中眾多組件中的其中一個組件中的一個文件，在?package.json 文件中包含 node_modules 中所有的依賴包
因此我所執(zhí)行的命令就是：npx patch-package @tarojs/components
執(zhí)行該命令后會在項目根目錄中自動創(chuàng)建一個?patches 文件夾，并且該文件夾中出現(xiàn)一個?package-name+version.patch 的補丁文件，如圖：
步驟五、測試補丁文件是否可以生效
手動刪除項目中的?node_modules 文件，并重新執(zhí)行 npm install 命令安裝?node_modules 依賴包。安裝成功后查看你之前修改的?node_modules 依賴包中的文件，查看你修改的代碼是否依然存在，如果之前修改代碼依然存在即表明補丁文件已經(jīng)生效，如果你之前修改的代碼不存在即表明補丁文件沒有生效，你需要從新閱讀本篇文章看到底是那個環(huán)節(jié)出了問題。
步驟六、當(dāng) 步驟五 中補丁文件測試成功后就可以將補丁文件推送到遠程倉庫中
無論是日后自己拉取代碼還是團隊中其他同事拉取代碼，無論 npm install 多少次該補丁文件都會生效。
補充：patch-package支持修改依賴包的依賴包
比如需要修改 node_modules/package/node_modules/another-package 中的源碼文件
在步驟四中的生成補丁文件的命令可以這樣寫（通過?/?分隔）
npx patch-package package/another-package
# scoped packages
npx patch-package @my/package/@my/other-package
詳情查看：https://shawchen08.github.io/2020/05/24/patch-package/
參考網(wǎng)址：
https://www.npmjs.com/package/patch-package
https://shawchen08.github.io/2020/05/24/patch-package/
