pnpm patchで依存パッケージにモンキーパッチを当てる -- 手順6ステップとpnpm linkでの事前検証

依存パッケージにバグや不足機能があるとして upstream に PR を出すほどでもない、あるいは PR がマージされるまで待てないというときのメモです。

手順

1. patch 対象を展開する

pnpm patch @ktrysmt/beautiful-mermaid@1.3.0

一時ディレクトリにパッケージが展開されます。パスが標準出力に出ます。

2. コードを編集する

展開されたディレクトリ内のファイルを直接編集します。

vim /tmp/xxxxx/dist/index.js

ビルド済みの dist/ を触ることになるので、変更箇所は最小限にします。

3. patch を確定する

pnpm patch-commit /tmp/xxxxx

patches/ ディレクトリに .patch ファイルが生成され package.json に pnpm.patchedDependencies が自動追加されます。

{
  "pnpm": {
    "patchedDependencies": {
      "@ktrysmt/beautiful-mermaid@1.3.0": "patches/@ktrysmt__beautiful-mermaid@1.3.0.patch"
    }
  }
}

4. install し直す

pnpm install

patch が適用された状態で node_modules に展開されます。

5. 動作確認

pnpm test

6. patch が不要になったら

upstream に修正が取り込まれたら、pnpm.patchedDependencies を package.json から消して patches/ 内の .patch ファイルを削除します。その後 pnpm install で元に戻ります。

注意

patch はバージョンに紐づくようで依存パッケージをアップデートしたら patch が当たらなくなります。バージョンを上げるたびに patch を作り直すか都度確認が必要です
dist/ をいじっているだけなのであくまで一時的な措置です
もしチームでこれを使う場合は .patch ファイルと package.json の変更をコミットしておいて pnpm install すれば、他のメンバーにも同じ patch が当たってくれます

pnpm link でローカルテスト

patch 前にローカルで動くか確認したいときは pnpm link

# ローカルのパッケージを直接リンク
pnpm link /path/to/beautiful-mermaid

# テスト
pnpm test

# リンク解除して registry 版に戻す
rm node_modules/@ktrysmt/beautiful-mermaid
pnpm install

pnpm link は node_modules にsymlinkを張るだけなのでローカルで編集した内容は当然即反映されます。

おわり

めんどいですが yarn patch より少し手間が少ないっぽくて、一時的にpatch運用を受け入れるとするなら体験はいいほうだったと思います。

手順