概要
自作パッケージを試す際に便利な npm link というコマンドがあることを知りました。公式ドキュメント等を読んでも使い方が分かりにくかったのですが、試してみると簡単でとても便利だったため、その使い方をまとめます。
前提
npm link は例えば次のような状況に使えます。
- 以下の2つのプロジェクトを開発している
- UIライブラリ
- そのUIライブラリをnpmから利用するWebアプリ
- UIライブラリを修正したあと、webアプリ側で修正内容を確認したい
通常はライブラリを npm publish してアプリ側で新しいバージョンをインストールしなければ確認できませんが、 npm link を使えば、即座にUIの変更をアプリ側に反映することができます。
例として、以下のような構成とします。
- UIライブラリのディレクトリは
/ui-libraryで、公開しているパッケージ名は@my/ui-libraryのようにスコープを持つ（package.jsonで指定） - Webアプリのディレクトリは
/web-app
リンクの作成
参照されるパッケージ側
プロジェクトのディレクトリ /ui-library で下記のコマンドを実行
npm link
これにより、以下のようにシンボリックリンクが作られます。
/Users/<user>/.anyenv/envs/nodenv/versions/14.16.1/lib/node_modules/@my/ui-library
-> /Users/<user>/Desktop/ui-library
リンクはグローバルなパッケージがインストールされる場所（この例の場合はanyenvのnodenv配下）に作られます。
パッケージ使用側
プロジェクトのディレクトリ /web-app で下記のコマンドを実行
npm link @my/ui-library
※ ディレクトリ名ではなくパッケージ名を指定することに注意
これにより、以下のようにシンボリックリンクが作られます。
/Users/<user>/Desktop/web-app/node_modules/@my/ui-library
-> /Users/<user>/.anyenv/envs/nodenv/versions/14.16.1/lib/node_modules/@my/ui-library
-> /Users/<user>/Desktop/ui-library
使用例
Webアプリ側で下記のようにUIをimportしている時、UI側の開発環境での最新のビルド結果が常に反映されるようになります。
import UILibrary from '@my/ui-library'
リンクの解除
パッケージ使用側
新しいバージョンのパッケージを利用したい場合
例えばUI側の修正を npm publish した後、実際に公開されたパッケージを利用してアプリで動作確認したいときは以下のコマンドを実行します。（通常のインストールと同じです）
npm i @my/ui-library@バージョン
すでにインストールされているパッケージに戻したい場合
下記コマンドで、リンクではなく元々のパッケージを利用するように戻ります。
npm i
パッケージをアンインストールしたい場合
通常のパッケージと同じように下記コマンドでリンクを解除することができます。
npm uninstall @my/ui-library
（uninstallのエイリアスであるremove, rm, r, un, unlinkのいずれでも大丈夫です。）
参照されるパッケージ側
利用側で解除した上で、グローバルにインストールされたパッケージのリンク自体を消したい場合は下記コマンドを実行します。
npm uninstall -g @my/ui-library
バグ？（2021/04/19追記）
上記方法でリンクを解除した際、パッケージ側のnode_modulesの中身が一部変わってしまうことが確認されました（npm i でインストールしなおせば戻りました）。
また、webpackのexternalの関係なのか、リンクを利用するアプリ側で明らかに通常のimport時と挙動が変わってしまっている部分がありました。
後者は無視できない問題なので、原因を探りたいところです。
参考
npm 公式ドキュメント