Zenn
💻

開発中のnpmライブラリをローカルでアプリにインストールした状態で開発する方法

2020/05/07に公開
JavaScript
npm
tech

npmライブラリを自分で作っているとき、実際にアプリ側から使いながらライブラリ側の開発をしたいということはたまにあります。

例えば VuePressのテーマを作っているときに、実際にそのテーマを適用したVuePressサイトを動かしながら、テーマの開発をしたい など

そのやり方を解説します。

結論

以下の2つの方法があります。

  • パターン1： npm link を使う
  • パターン2： dependencies にローカルパスを設定する

以下、それぞれについて説明しますが、前提として以下のようなローカル環境をイメージしてください。

  • /path/to/library/ に、開発中のライブラリのコードがある
    • つまり /path/to/library/package.json がある
  • /path/to/app/ にそのライブラリを使用するアプリのコードがある
    • つまり /path/to/app/package.json でライブラリに依存したい

パターン1： npm link を使う

$ cd /path/to/library
$ npm link

これで、

/usr/local/lib/node_modules/{ライブラリ名} に /path/to/library へのシンボリックリンクが設置されます。

{ライブラリ名} というのは、ライブラリ側の package.json に設定している name のことです

$ cd /path/to/app
$ npm link {ライブラリ名}

これで、 /path/to/app/node_modules/{ライブラリ名} に /usr/local/lib/node_modules/{ライブラリ名} へのシンボリックリンクが設置されます。

結果的に、 /path/to/app/node_modules/{ライブラリ名} は /path/to/library を指すことになるので、あとは普通に /path/to/library 側で開発作業をすれば、リアルタイムでアプリ側にも反映されるという寸法です👍

3. 用が済んだら npm unlink {ライブラリ名} --no-save または npm install する

用が済んだら、混乱を防ぐためにもリンクを切っておきましょう。

npm unlink {ライブラリ名} --no-save を実行すれば、シンボリックリンクが削除されます。（ --no-save を付けないと package.json からも {ライブラリ名} が削除されてしまいます）

また、単に npm install をするだけでもシンボリックリンクは削除されて、 package.json で定義している依存のとおりの状態に戻ります。

逆に言えば、開発中にアプリ側で追加の依存が必要になって npm install した場合、その時点でシンボリックリンクは削除されてしまうので、改めて npm link {ライブラリ名} する必要があるので注意しましょう。

その他注意事項

npm link {ライブラリ名} しただけでは、 「ライブラリが依存しているライブラリ」はアプリ側にインストールされません。

なので、アプリとライブラリの性質によっては、開発中のみ、「ライブラリが依存しているライブラリ」の一部を「アプリ側で明示的に npm install --no-save しておく」必要がある場合があります。（わかりにくいですね💨）

もちろん、自作ライブラリ公開後に npm install {ライブラリ名} された場合には、「ライブラリが依存しているライブラリ」もすべてアプリ側の node_modules にインストールされるので問題になりません。あくまで開発中だけのお話しです。

パターン2： dependencies にローカルパスを設定する

npm 2.0.0以降では、 dependencies や devDependencies に ローカルパスを設定できます。

これを使って、アプリ側の package.json に

"dependencies": {
  "{ライブラリ名}":"file:/path/to/library"
}

のように書いておけば、これだけで開発中の自作ライブラリに依存することができます👍

npm link のときのように「ライブラリが依存しているライブラリ」がインストールされないというようなこともないので、とてもスマートな方法に思えます。

が、 「ライブラリ側のコードの変更がリアルタイムに反映されない」のが大きなデメリットです。

開発中のライブラリなので少し書いては動かし、を繰り返し行いたいのですが、この方法だとその度にアプリ側で npm install を実行してライブラリのコードを最新化しないといけません。

メリット・デメリットまとめ

npm link ローカルパス
メリット ライブラリの変更がアプリ側にリアルタイムに反映される 「ライブラリが依存しているライブラリ」も含めてすべてアプリ側にインストールされる
デメリット 「ライブラリが依存しているライブラリ」をアプリ側で別途インストールしないといけない場合がある ライブラリを変更する度にアプリ側で npm install が必要

ユースケースに合わせて使い分けてみてください✋

参考リンク

GitHubで編集を提案

Discussion