npmで「npm install -g」ではなくnpxをおすすめする理由

npmではライブラリだけでなく、Node.jsで実装されたコマンドラインツールも多数配布されています。こういったツールをインストールする際に「npm install -g」のように-gオプション付きでnpm installコマンドを実行すると、そのコマンドがパスの通った場所にインストールされ、カレントディレクトリがどのディレクトリであってもコマンド名だけでそのコマンドを実行できるようになります。

たとえばこの方法でvueコマンド(vue-cli)をインストールする場合、次の例のようになります。

# npm intall -g @vue/cli

こうやってインストールすると、次のようにvueコマンドだけでvue-cliを実行可能になります。

$ vue

この方法は一見便利なように見えますが、npm install -gコマンドの実行時にroot権限が必要になるという問題があります。さらに、インストールしたコマンドは全ユーザーが利用できるようになるため、意図せずに他のコマンドと競合するといった副作用が発生する可能性もあります。

そのためおすすめしたいのが、-gコマンドを利用せずにローカルディレクトリにインストールし、npxコマンドを使ってインストールしたコマンドラインツールを利用するというやり方です。

npxコマンドは、カレントディレクトリを起点としてnode_modulesディレクトリを探索し、引数で指定したコマンドを見つけたらそれを実行する、という処理を行うコマンドで、2017年にリリースされたnpm v5.2.0からnpmに同梱されています(リリースノート)。

たとえば先のvue-cliを利用したい場合、まずこのツールを利用したいプロジェクトのディレクトリ内で次のように-gオプションなしでインストールを行います(ちなみに-DはインストールするモジュールをdevDependenciesに追加する処理を行うオプションです)。

$ npm install -D @vue/cli

こうやってインストールしたvueコマンドを使って、たとえば「vue create」コマンドを実行したい場合、次のように実行します。

$ npx vue create .

ちなみにここではプロジェクト名の代わりに「.」を指定していますが、こうするとvue-cliはカレントディレクトリ内にプロジェクトを作成してくれます。

この手法には、root権限が不要であるというだけでなく、プロジェクトごとに異なるバージョンのツールを簡単に利用できるようになるというメリットもあります。一方でデメリットとしては、プロジェクトごとにインストールが必要になり、またそのためディスク容量を余分に使用するというものがあります。とは言え、昨今のツールでそのデメリットはあまり大きくないでしょう。

ここではvueコマンドを例にしましたが、tscコマンドやwebpack-cliなどでも同様に使えます。