天天看點

關于 patch-package 修改 node_modules 源碼後無效的問題

使用patch-package定制node_modules 中的依賴包

Step1: 通過指令安裝 patch-package

npm install patch-package --save-dev
           

Step2: 修改項目根目錄下的 package.json 檔案

在 package.json 檔案中的 scripts 中加入 “postinstall”: “patch-package”

關于 patch-package 修改 node_modules 源碼後無效的問題

Step3: 手動修改 node_modules 依賴包中的源碼

關于 patch-package 修改 node_modules 源碼後無效的問題

Step4: 手動執行指令建立 npx patch-package package-name 更新檔檔案

執行指令:npx patch-package package-name

執行該指令後會在項目根目錄中自動建立一個 patches 檔案夾,該檔案夾中就會出現一個 package-name+version.patch 的更新檔檔案。

其中指令中的 package-name 指的是被修改的依賴包的名字(不是被修改的檔案的名字)

舉個例子:還是在 圖1-3 中我修改的是 iview/dist/index.js 元件依賴包中衆多元件中的其中一個元件中的一個檔案,在 package.json 檔案中包含 node_modules 中所有的依賴包

執行該指令後會在項目根目錄中自動建立一個 patches 檔案夾,并且該檔案夾中出現一個 package-name+version.patch 的更新檔檔案,如圖:

關于 patch-package 修改 node_modules 源碼後無效的問題

Step5:測試更新檔包是否有效

手動删除項目中的 node_modules 檔案,并重新執行 npm install 指令安裝 node_modules 依賴包。安裝成功後檢視你之前修改的 node_modules 依賴包中的檔案,檢視你修改的代碼是否依然存在,如果之前修改代碼依然存在即表明更新檔檔案已經生效,如果你之前修改的代碼不存在即表明更新檔檔案沒有生效,你需要從新閱讀本篇文章看到底是那個環節出了問題。

Step6:若 Step5 中更新檔檔案測試成功後就可以将更新檔檔案推送到遠端倉庫中

這樣,無論是日後自己拉取代碼還是團隊中其他同僚拉取代碼,無論 npm install 多少次該更新檔檔案都會生效。

關于 patch-package 修改 node_modules 源碼後無效的問題