npmパッケージを変更する方法

投稿 2021.10.15

目次

npmパッケージを変更したいケースがあり、その方法を模索しました。

node_modules内のソースコードを変更した場合「npm install」を実行したタイミングで元の状態に上書きされてしまいます。
github上のソースコードをForkして自前のパッケージをインストールする方法なども試しましたが、うまく動かないことがありました。

結論としては「patch-package」というnpmパッケージを使うのが一番簡単で手っ取り早いと感じましたのでその方法をまとめておきます。

patch-package をインストール

npm install patch-package --save-dev

パッチファイルを生成する

node_modules内のソースコードを変更します。
そして、以下のコマンドを実行します。

❯ npx patch-package 変更したパッケージ名

実行後、以下のファイルが生成されます。
patches/変更したパッケージ名.patch

package.json を変更

scripts内にpostinstallを追加します。
npm install後の位置であれば問題ありません。
これを入れておくと本番環境でもnode_modules内のソースコードを変更内容を適用してくれます。

package.json
   "scripts": {
     "dev": "next",
     "build": "next build && next-sitemap --config sitemap.config.js",
     "start": "next start",
+    "postinstall": "patch-package",
     "now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build",
     "build-stats": "ANALYZE=true npm run build",

gitにプッシュ

以下ファイルをプッシュします。

  • 生成された「patches/変更したパッケージ名.patch」
  • package.json

これだけでnode_moduleへの変更内容をgitで管理することができます。
もし、パッケージのバージョンが変わったらそれに応じてパッチファイルも変更が必要です。

この記事を書いた人

avatar

にいよん

WEBエンジニアで0&2歳娘のパパです。フルリモートでちいたまに引きこもり中。密かにFIRE目指してます。こんな情報を発信中→投資、IT技術、副業、仮想通貨、暗号資産、NFT、メタバース、ブロックチェーン

© 2021 - 2022 24365.dev