[フロントエンド] npm linkを使って、効率的にnpmモジュールを開発する

こんにちは、@yoheiMuneです。
npm linkというコマンドがあるんですね、初めて知りました。npmモジュール開発が効率的にできたので、ブログにも用途や使い方をまとめておきたいと思います。

目次

npm linkとは

npm linkはシンボリックリンクを貼る仕組みで、開発中のnpmモジュールと、それを組み込むアプリケーションとをつなぎ合わせることができる仕組みです。

ここでは、開発中のモジュールをmymodule、それを組み込むアプリをmyappとして、以下のディレクトリ構成だとします。

+ ~/git/
  - mymodule/   <--- 開発中のモジュール
  - myapp/      <--- 開発中のアプリ
    - node_modules/
      - mymodule/ (※2)  <--- 開発中のモジュールに依存している

通常であればmyappからmymoduleを使う場合には、npm install mymoduleで読み込めばOKです。しかし、myappとmymoduleを同じタイミングで開発したい場合、開発中のmymoduleはnpmに公開されていない（=開発中を毎回公開するのは手間である）ため、myappへの取り込みができません。

そんな時に使えるコマンドがnpm linkです。シンボリックリンクを活用することで、開発中のmymoduleをmyappから利用できるようにします。

npm linkの使い方

npmリンクは「参照される側（mymodule）」と「参照する側（myapp）」それぞれで作業を行います。

参照される側（mymodule）での作業

参照される側では、シンボリックリンクの作成を行います。mymoduleのディレクトリ内で以下のコマンドを実行します。

# mymoduleのフォルダ内にて
$ npm link

/Users/yoheimune/.nvm/versions/node/v8.1.0/lib/node_modules/mymodule
  -> /Users/yoheimune/git/mymodule

上記を実行するとグローバルなnode_modulesに、mymoduleへのシンボリックリンクが作成されます。

※ グローバルなフォルダのパスは、環境によって異なります。ここではnvmでの例です。

参照する側（myapp）での作業

参照する側では、上記で作成したシンボリックリンクを使えるようにします。以下のコマンドを実行します。

# myappのフォルダ内にて
$ npm link mymodule

/Users/yoheimune/git/pdfanno/node_modules/mymodule 
  -> /Users/yoheimune/.nvm/versions/node/v8.1.0/lib/node_modules/mymodule 
    -> /Users/yoheimune/git/mymodule

少し長い出力ですが、リンクが繋がってmyappからmymoduleが参照できていることがわかります。

この状態で開発すればmymoduleの変更がmyappにも自動的に反映され、効率的に開発ができます。便利ですね！

npm linkを解除する

myappでnpmリンクの利用を辞めたい場合には、npm installコマンドを実行します。シンボリックリンクは削除され通常通りnpmモジュールを参照するようになります。

参考資料

npm linkの詳細は、公式ドキュメントをご確認ください。

最後に

実際にはpdfanno（=アプリ）とanno-ui（=モジュール）の開発で必要になって、探していたら見つけました。npmって色々なコマンドがあるんですね。

最後になりますが本ブログでは、Node.js、Python、Swift、Go言語、フロントエンド、Linux、インフラ、Java、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時に、解決の糸口を見つけられる」そんな目標でブログを書き続けています。今後も役立つネタを書いていきますので、ぜひ本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！