2017/12/06更新

[フロントエンド] 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です。しかし、myappmymoduleを同じタイミングで開発したい場合、開発中のmymoduleはnpmに公開されていない(=開発中を毎回公開するのは手間である)ため、myappへの取り込みができません。

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



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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時に、解決の糸口を見つけられる」そんな目標でブログを書き続けています。今後も役立つネタを書いていきますので、ぜひ本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。