0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ローカル開発しているnpmパッケージを即反映させる方法

Posted at

npmパッケージをローカル環境で開発している際、

// 開発中パッケージ側
npm publish

// 別プロジェクト側
npm install

のように毎回npm publishをして動作確認をするのはとても非効率です。
この際利用すると便利なのでnpm linkです。

npm linkとは

npm linkは、ローカルで開発中のnpmパッケージを、他のプロジェクトから仮想的にインストールする仕組みです。
具体的にはシンボリックリンクを使って、node_modulesにリンクを貼っています。

使用方法

開発中のnpmパッケージでリンクを作成

cd ~/my-lib
npm link

これでmy-libという名前のグローバルリンクが作成されます。
このグローバルリンクの名前はpackage.jsonのnameに基づく名前が使われます。

利用したいプロジェクトでリンクを貼る

cd ~/my-app
npm link my-lib

これでmy-appプロジェクトのnode_modules/my-appにリンクが貼られ、パッケージ側で更新があれば即反映が可能となります。

注意点

npm linkは便利ですがいくつか注意点があります。

ホットリロードされない

例えばアプリケーション側でNextJSを利用して開発している場合、npm run devで開発環境を立ち上げホットリロードされますが、パッケージ側を更新してもホットリロードされない場合があります。
--watch付きビルドツールなどを併用する必要があったりとなります。

TypeScript変更が反映されない

パッケージ開発でTypeScriptを利用している場合は毎回tscなどでビルドを挟む必要があります。

Dockerで扱いにくい

開発パッケージとアプリケーションが同じコンテナであれば問題ないですが、片側だけDockerを利用しているなどはnpm linkで作成したリンクを読み取れません。基本的にホスト間でのみ有効です。
また、Docker再起動後は再度npm linkを実行する必要があります。

まとめ

npm linkは小規模プロジェクトでライブラリ共有をしたい時、npm publish前の動作確認、CLIツールなどをローカルでテストしたい時などにとても便利です。
しかし、Dockerを利用したい場合はMonorepo + bolumeマウント構成にしたりしないといけないので状況に応じて使用しましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?