patch-packageでnpmパッケージ（node_modules）にパッチをあてて修正する

やりたいこと

利用しているnpmパッケージのバグが中々修正されないため、node_modules下のファイルを自前で修正したい。

対象のGitプロジェクトをForkする方法もあるがアップデート対応などで手間がかかりそうなので、今回はpatch-packageを使ってパッチをあてて修正してみる。

patch-packageとは

• npmパッケージの修正差分を適用するためのパッチファイルを自動で生成してくれるライブラリ
• npm installを叩くたびにそのパッチを自動で適用してくれる

使い方

1. patch-packageのインストール

npm install patch-package --save-dev

yarn add patch-package postinstall-postinstall

yarnの場合はpostinstall-postinstallのインストールも必要になる。

2. npm scriptsの追加

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

package.jsonにて上記のようにnpmスクリプトを追加する。

これでnpm install後にパッチが自動で適用されるようになる。

3. npmパッケージの編集

node_modules配下にある対象のパッケージのファイルを任意のものに修正する。

node_modules
└── <PACKAGE_NAME>
    ├── dist
    │   └── index.js
    └── src
        └── index.js

ちなみに参照しているコードがdistといったビルド後のディレクトリ下にある場合は、その配下のコードを修正する必要がある。

4. パッチファイルの作成

npx patch-package <PACKAGE_NAME>

上記コマンドを叩くことで、先ほどの修正とオリジナル間の差分を検出し、/pathces/<PACKAGE_NAME>+<VERSION>.patchというパッチファイルが作成される。これで完了。

5. パッチの検証

rm -rf node_modules/<PACKAGE_NAME>
npm install

正常にパッチが適用されるか試す場合は、上記のように一度対象のパッケージを作成してから再度インストールする。

CUI上で適用した旨が出力され、対象のファイルに修正が反映されていればOK。

もし開発環境の動作にその修正が反映されていない場合は、下記のようにキャッシュを削除すると解決する場合もある。

npmのキャッシュを強制的にクリアしてリセットする2023-08-08