npmについてくるnpxコマンドをもっと活用しようぜ

Node.jsのパッケージマネージャであるnpmにはnpmコマンドのほかにnpxというコマンドがついてきます。npxは便利さのわりにあまり活用されていない気がしたので書いた記事。

npxコマンドとは？🤔

npxはnpmのパッケージで定義されたコマンドを起動するコマンドです。npmのパッケージではpackage.jsonのbinを設定することでそのパッケージをインストールしたときに同時にインストールするコマンドを定義することができます。npxではパッケージ名を指定することでそのパッケージで定義されたコマンドを実行できます。

利点1 - ローカルインストールしたパッケージのコマンドの起動が楽😀

npmで配布されているCLIアプリを使うとき、npm installに-gフラグを付けてグローバルにインストールしろ、という指示になっていることが多いです。

グローバルにインストール

$ npm install -g npm-check-updates

これによりコマンドがシステム全体にインストールされるので、パッケージのコマンドがどこからでもそのまま実行できます。

グローバルにインストールしたコマンドを実行

$ ncu

しかし、システムにインストールするnpm install -gには通常sudoが必要ですし、システムに変更を加えるのは避けたいです。

だからといってローカルにインストールすると下記のように起動が面倒であるという欠点があります。

ローカルにインストールすると起動が面倒

$ npm install npm-check-updates # ローカルにインストール
$ ./node_modules/.bin/ncu       # 起動

そんなときにnpxを使うと以下のようにローカルにインストールしたコマンドを簡潔に起動できます。

ローカルでも起動が楽！✅

$ npx ncu # 起動

単純にパッケージがインストールしたコマンド名の前にnpxをつけるだけです。

利点2 - そもそもインストールしなくて良い😲

前セクションでnpxを使ってローカルインストールしたパッケージのコマンドを起動する方法を紹介しましたが、実はnpxではそもそもパッケージをインストールする必要自体ありません。なぜならインストールされていないパッケージは自動で一時フォルダにインストールして実行するという機能があるからです。

例えば

インストールの必要なし！✅

$ npx npm-check-updates

以上だけでnpm-check-updatesパッケージをダウンロードし、一時フォルダに展開し、定義されているコマンドを実行するということを行ってくれます。

他にも静的なウェブサーバのパッケージであるserveであれば

インストールなしでウェブサーバを直接起動！✅

$ npx serve -p 8080

これだけでウェブサーバを起動できます。引数もそのまま渡せます。超便利！