[分享] 修改依賴源碼超省時的補丁套件

有的時候，因為一些個人因素，或是依賴庫的檔案有問題，使你不得不去修改 node_modules 裡某個套件的源碼，或許你修正了，也發出 PR 正在等待合併，可是如果你重新使用 npm install 可能還是會拉到尚未修正的源碼，而這個補丁工具 patch-package 可以快速解決你的問題。

目錄 | Contents

• 起源
• 安裝 patch-package
• 修正源碼
• 創建補丁
• 部署
• 實際應用
• 網路參考文章

起源

因為我去改了 node_modules 裡某個套件的源碼，看了網路上說明為了避免下次拉依賴庫又會被修改回來，所以你可能要自己把修正拉進自己的庫，但修改起來看了有點麻煩，文章內有提到另一個補丁工具，索性就用用看，這工具實在好用，記錄下使用過程，如果有看不懂的地方可以看這篇最下方的參考文章．

安裝 patch-package

npm install patch-package --save-dev

修正源碼

接著你可以去改 node_modules/xxx/xxx 的檔案

創建補丁

// npx patch-package package-name
npx patch-package xxx

• package-name 就是你依賴的 node_modules/xxx 的名字
• 執行完成會發現生成 patches 文件夾，裡面有修改過的文件 diff 紀錄

部署

• 修改 package.json，新增命令 postinstall

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

  之後再下`npm install` 就會發現它幫你下載相依庫時又修正更改了，這真是太神奇了！ （你可以刪掉相依在讓它載回來看看，記得備份）

  + $npm install
  
  > hexo-site@0.0.0 postinstall xx/blog/minilabmemo.github.io
  > patch-package
  
  + patch-package 6.5.1
  + Applying patches...  //下面的檔案進行修改
  hexo-insert-toc@1.1.2 ✔
  audited 543 packages in 2.279s

實際應用

hexo 主題魔改

之後曾有提過我有針對主題底層更改魔改-theme-主題樣式，後來又備份自己修改的地方，想一想或許可以用這個套件修補．

• 原本架構

  themes/icarus  //不會上傳  install from source git clone來的
  themes/icarus_fix_record //自己的修改備份紀錄

• 改用 install from NPM

  npm install -S hexo-theme-icarus
  專案出現相依庫
  "hexo-theme-icarus": "^5.2.1",

• 接著移除掉 themes/icarus 資料夾
  原本修改的地方就被恢復成原主題了

• 接著再把我備份的修改紀錄去修改 node_modules/hexo-theme-icarus

  themes/icarus_fix_record/include/style/base.styl
  themes/icarus_fix_record/include/style/card.styl
  themes/icarus_fix_record/include/style/helper.styl
  themes/icarus_fix_record/layout/common/article.jsx
  ...

• 創建補丁 npx patch-package hexo-theme-icarus

  • 因為檔案會有點多，所以也可以再加上 –include “.include.“ 讓他針對部分去修改就好
  • 完成後去生成的檔案夾確認 diff，這邊也可以記錄你的修改

    $ npx patch-package hexo-theme-icarus
    patch-package 6.5.1
    • Creating temporary folder
    • Installing hexo-theme-icarus@5.2.1 with npm
    • Diffing your files with clean files
    ✔ Created file patches/hexo-theme-icarus+5.2.1.patch
    
    💡 hexo-theme-icarus is on GitHub! To draft an issue based on your patch run
    
        npx patch-package hexo-theme-icarus --create-issue
    $ npx patch-package hexo-theme-icarus --include ".*include.*"
    $ npx patch-package hexo-theme-icarus --include ".*(?:include|common).*"

• 重新安裝確認
  你可以刪除相依再次下 npm install確認，但似乎用 npm install -S hexo-theme-icarus是沒有作用的

網路參考文章

• 修改 nodejs 项目中 node_modules 的代码，不能生效吗？

  • 配置 webpack alias 的方法介紹（沒用過）

• 使用 patch-package 修改第三方模块

  • 更多選項介紹

• Super Easy NPM Package Patching with ‘patch-package’

• Photo by Webstacks on Unsplash

• Photo by Sincerely Media on Unsplash