npxが結構良さそうな件について

追記：2017/07/12 gist連携時の理解が間違ってたので修正

npm 5.2リリース。npmパッケージのダウンロードと実行を一度に行うCLIツールnpxが同梱された / “Release v5.2.0 (2017-07-05) · npm/npm · GitHub” https://t.co/2CXccPBqcq

— Teppei Sato (@teppeis) 2017年7月11日

へー、と思って見に行ったら結構面白かったので雑な紹介を書いてみることにする。

• v.5.2.0 リリースノート
• npxの紹介記事

この記事は紹介記事のざっくりしたサマリ相当です。

適当に20分くらい触ってわかったことだけ書いてあるので間違ってたり不正確だったりしたら別途詳解記事を書いて教えてもらえると幸いです。

npx is 何？

1. $(npm bin) やってくれるマン
   • npx tsc は大体 $(npm bin)/tsc か tsc
   • 実際にはproject local見てglobal見てなかったらどっかに自動的に入れるとかしてくれるぽいのでもっと複雑かも
2. コマンド無かったら勝手に入れて実行してくれるマン
   • npx create-react-app my-cool-new-app とかやると create-react-app パッケージを（どっかに）インストールして create-react-app my-cool-new-app を実行してくれる
   • npx -p typescript -p typescript-formatter tsfmt -r とかもできる
     • パッケージ名とコマンド名が一致してなかったりdependencies以外の依存があったりするとちょっとだるそう
3. gistとか適当に試すマン
   • npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32 とかやると npm install して bin を実行してくれるっぽい

使い方

npm 5.2.0 以降ならバンドルされています。つまりNode.jsにもそのうちバンドルされる…？
npm -v して 5.2.0以前なら、npm install -g npm か npm install -g npx の好きなほうを実行すればよさそうです。

何が良いのか？

ライブラリ作者がNode.js環境は整っている人に適当に何かを試させるのが簡単になる。
例えば、typescript-formatterなら npx -p typescript -p typescript-formatter tsfmt -r を実行してもらうだけでとりあえず動作確認してもらえる。
使う側も、コマンドを見ればどういう依存関係を追加すればどういうことができるか見ればわかるので試した後に導入も簡単。
npx -p typescript@next -p typescript-formatter tsfmt -r とか npx -p typescript@^1 -p typescript-formatter tsfmt -r みたいなこともできるので便利そうです。

gistにコンパイルエラーの再現環境を作っておいて npx -c "npm run exec" https://gist.github.com/vvakame/4d882bb3f611c8c14ab86c5d18d8a9eb とかやると手元での再現とかも一瞬で確認できます。
gistにコンパイルエラーの再現環境を作っておいて npx -p https://gist.github.com/vvakame/4d882bb3f611c8c14ab86c5d18d8a9eb run-tsc とかやると手元での再現とかも一瞬で確認できます。
便利ですね。
注意点として、gistのURLをターゲットにした場合も単にそれがinstallされて通常のnpmのルールに従ってbinが展開されてパスが通るだけなので、訂正前のように -c "npm run exec" とかやってもpwdで実行されてしまって再現という意味では意味がなかったです。
この記事を最初に書いたときは再現環境直下で試したので上手く動いたように誤解してしまっていました。
再現環境下で動かすには結局何らかのトリックが必要になります。
例えばこういうshell scriptで仲介するとか。

どこにcloneとかinstallとかされて実行されているのかはよくわからないので、実はgistの設定ではなくてproject localとかglobalのコマンドを実行していてハマる… というパターンもありそうです。がんばりましょう。
ちなみに僕の環境のデフォルトだと ~/.npm/_npx/ の下にパッケージが展開されていたりしました。

じゃあくな使い方も簡単にできそうなので使わせる方も使う方もじゃあくにやられないように気をつけましょう。