JSでライブラリを作って、そのライブラリを使うプロジェクトがあった時に、使う側がpackage.jsonのdepedenciesに依存を追加して、npm installしてbrowserifyとかでrequireしたりしています。(browserifyでのmoduleの依存解決について興味のある方は”Browserify dependencies in depth!“をご参照ください)

gitのsubmoduleなんか使うよりはnpm installだけで済むので快適なのですが、絶賛開発中にライブラリ側を更新する度に、使っている側のプロジェクトのnode_modules以下の該当ディレクトリを削除してnpm installし直したりするのは面倒ですよねー

そこでnpm linkを使うと良い感じになりますたのでメモ。意外と記事が少なかったのでまとめておきます。


npm link使い方

1. ライブラリのディレクトリで”npm link”を実行
実行するとモジュールのsymbolic link(紐付け)が完了します。今回の例では自作のライブラリをyour_common_moduleとしています

your_common_module xxx$ npm link
/Users/xxx/.nodebrew/node/v0.11.12/lib/node_modules/your_common_module -> /Users/xxx/your_common_module

2. 使う側のプロジェクトで”npm link your_common_module”を実行
使う側のプロジェクト直下で下記コマンドを実行。linkを辿る様子が出力されます。

your_project xxx$ npm link your_common_module
/Users/xxx/your_project/node_modules/your_common_module -> /Users/xxx/.nodebrew/node/v0.11.12/lib/node_modules/your_common_module -> /Users/xxx/your_common_module

これで紐付け完了!これまで使う側がbrowserifyなどで node_modules/your_common_module 以下を見に行っていたところが、1で登録したライブラリ自身のディレクトリを見に行くようになります。
(ちなみに、この例ではnodeのv0.11.12を使っていますが、iojsの古いバージョンではerrorで動かなかった…)


linkの確認

使う側が紐付けを行っているか確認するためには”npm ls your_common_module”で確認できます。

your_project xxx$ npm ls your_common_module
└── your_common_module@0.0.1 -> /Users/xxx/your_common_module

linkの削除

linkを消すためには、npm unlinkを使います。

your_project xxx$ npm unlink your_common_module
unbuild your_common_module@0.0.1

めでたしめでたし。もうnpm installを繰り返す必要はありませんね!


Categories: JS

Related Posts

JS

Vue.jsでpopup componentを作ってみる

この記事はVue.js Advent Calendar 22日目の記事です。 前回の記事「browserify + debowerify + vueifyを使ったvue.js component開発」の続きです。 今回は少し実用的なwidgetのようなものとしてpopupのcomponentを作る方法を紹介します。 (※Vue.jsのバージョンはv0.11.4です) とりあえず、どんなものかはデモを見てもらうとわかり易いです。ボタンをクリックしてみてください。

JS

requirejsをbowerでインストールしてgruntでビルドする

私はJSを書くときはAMD推奨派なので、比較的大きめのアプリを作るときはまずrequireJSなどを使用します。 requirejsを使ってモジュールを作成すると依存関係が明確になり、テンプレートなどもrequirejs-textなどを使用すれば再利用がとても容易な形で記述することができます。 ただし、AMD時の一つの懸念点としてビルドして依存モジュールをconcat&uglifyしなくてはパフォーマンスがでないという点が挙げられます。そこで探してみるとgruntのtaskモジュールで内部的にr.jsを使用してビルド(依存モジュールの連結+compress)を行ってくれる便利ツールを発見。これを使えばパフォーマンスに関する問題は大丈夫でしょう。 以下、少し長いですがセットアップ手順です。

JS

子孫要素のイベントをバブリング時に判定する

よく忘れるのでメモ。 イベントのバブリングによる伝播時に、特定のクラスを持ったnode自身、もしくは、その子孫要素をクリックした場合のみ処理をしたい場合、以下のようにする。