PIYO - Tech & Life -

patch-packgeでpackage.jsonの差分を含める

node JS

patch-packageっていうnpmパッケージありますよね?

この記事↓が詳しいので紹介はだいぶ任せちゃうのですが、npmパッケージを手元でちょっとだけ直したいときに重宝する仕組みです。

かゆいところに手が届く!patch-packageでnpmパッケージを乗りこなそう - bagelee(ベーグリー)
npmパッケージを利用する際、バージョンの違いなどで動かなかったり、少しだけカスタマイズしたいといったような場面に遭遇することはないでしょうか?そんなときに使えるpatch-packageというツールをご紹介します。

使い方はこう。

  1. 手元でnode_modules配下のとあるパッケージのコードをいじる
  2. npx patch-package xxx_target_package を実行
  3. 1の差分のpatchができる
  4. post-installに書いとけば自動的にpatchが当たる

(もちろん明らかな問題の場合はプルリクエストを投げるなりIssueで報告するなりが望ましいのですが、React Nativeのライブラリに含まれるネイティブコードがまれによく壊れる関係で、こういう仕組みも必要なのです!!)

なんですが!

パッケージによってはimport時にビルド済のコード(distとか)が参照されるために、パッチを当てにくい場合があります。

minifyされたコードを無理やり変更してnpx patch-packageした場合、コード全部がパッチ対象になるのでかなり厳しいことになります。

ところで昨今、大抵のプロジェクトではアプリケーション側で何かしらのビルドの仕組みを入れていることが多いと思われます。であればimport対象をビルド前のソースコードにして、アプリケーション側でビルドさせてしまうこともできるはず。そしてそうすればpatch-packageの修正も数行に収めることができるはずです。

ということで、とある架空のプロジェクトのpackage.jsonにこういう変更を加えます。

--- a/node_modules/xxx-lib/package.json
+++ b/node_modules/xxx-lib/package.json
@@ -108,7 +112,7 @@
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "name": "hogehoge",

そして実pp際に変更を加えたいところも直してnpx patch-packageします。

するとなんと、package.jsonへの差分が無視されてしまいます。実はpatch-packageには除外の仕組みがあって、package.jsonは除外対象となっているのです。

Fails to recognize diffs in package.json · Issue #219 · ds300/patch-package
I was trying to modify a package's main field, but patch-package reported no changes found my guess is the package.json is intentionally ignored to avoid anomalous diffs made by package manager...

ということで、今回の場合は↓のように除外対象を上書きすることでpackage.jsonを対象にできました。

npx patch-package xxx-lib --exclude '^$'