Monorepoのパッケージをnpm linkでローカル開発する方法

背景

・my-common-lib-repo というmonorepo構成のリポジトリがある
・その中の packages/common が @my-scope/common-lib というnpmパッケージ
・これを別リポジトリ my-admin-app で使っている
・まだ正式リリースできない変更をローカルで動作確認したい
・npm install すると node_modules が上書きされる → 直編集はNG

👉 そこで npm link を使ってローカルで安心して変更＋確認 できるようにした

構成

~/dev/my-common-lib-repo/
  packages/common/  ← ここが @my-scope/common-lib
~/dev/my-admin-app/
  node_modules/@my-scope/common-lib  ← ここで使う

手順

① common-lib 側でnpm link作成

cd ~/dev/my-common-lib-repo/packages/common
npm install
npm run build
npm link

② 使用側プロジェクトでlinkを貼る

cd ~/dev/my-admin-app
npm link @my-scope/common-lib

③ 開発ループ

・packages/common/src を編集
・必要なら npm run build
・my-admin-app 側で npm run serve
・ブラウザにて確認

④ リンク解除

cd ~/dev/my-admin-app
npm unlink @my-scope/common-lib
npm install

まとめ

Monorepoでもnpm linkを使うことでローカル変更の確認が快適になる。
本番公開前の段階でとても便利な手法。