npmとnpxの違いを調べる

npmとnpx。正直違いがあまりわからないので
https://qiita.com/renesisu727/items/4b34df1a3cfe8d534303
↑とかを見ていい感じに記事にしていきたいと思います。
npmがやってることはなんとなくイメージがつくのでnpxがなんなのかをいい感じに調べていきたい。

create-react-appを使ってnpmとnpxを理解する

npmのnpxの違いを理解するために、実験みたいな感じでcreate-react-appの環境構築をやってみたいと思います。

create-react-appとは

Reactの開発環境を簡単に構築することができるパッケージ

npmでcreate-react-appをインストール

最初にnpmを使ってcreate-react-appをインストールしてみたいと思います。

npmとは

正式名称は「Node package manager」。
名前の通り、Nodeのパッケージを管理するツール。

パッケージ：あらかじめ用意された便利な機能をまとめたもの。

依存関係を考慮していい感じにパッケージをインストールしてくれる優れもの。

$ which create-react-app

まずは自分のPCに既に入っているcreate-react-appをアンインストールします

/Users/sakai_yu/.nodebrew/current/bin/create-react-app

ここにcreate-react-appがあるよ~と言っているので、

npm uninstall -g create-react-app

で削除。

$ which create-react-app
create-react-app not found

削除完了〜
create-react-appいちいち打つのめんどいので以下craと略します！

グローバルインストールとローカルインストール

なんか調べると、パッケージのインストールにはグローバルインストールローカルインストールというものがあるらしい。
実験してそれぞれがどういうものなのかを調べていくぅ⤴︎

グローバルインストール

$ npm -g install create-react-app

-gでグローバルインストールって意味。

$ which create-react-app
/Users/sakai_yu/.nodebrew/current/bin/create-react-app

インストールしたcraはここに格納されてあった。
whichで反応したということは、グローバルインストールしたパッケージは自動的にパスが通る（どこからでも使えるようになる）ということだと思われま。

ちなみにこの階層にはnodebrewでインストールしたnodeとか、npmとかnpxも入ってた。
どこからでも呼び出せるよ〜って感じ。

実際に自分で作ったideaディレクトリでcreate-react-app実行してみた。

$ create-react-app app

 

成功！
npm startでも問題なくローカルサーバーを起動できた。
グローバルインストールしたcraはどのプロジェクトからでも使えるっぽい

$ npm -g uninstall create-react-app

次はローカルインストールをやってみるからとりあえずアンインストール

ローカルインストール

$ npm install create-react-app 
$ npm -l install create-react-app //上のコマンドと意味は同じ

-lでローカルインストールって意味。

$ which create-react-app
create-react-app not found

ローカルインストールしたcraを探してみるけど見つかんない。
つまりパスが通ってない。

ファイル検索をするとここに格納されてあった。
ホームディレクトリ直下のnode_modulesに入ってる。

$ create-react-app app2

とりあえずホームディレクトリでcreate-react-appしてみる

zsh: command not found: create-react-app

create-react-appっていうコマンドがないよって怒られた。

./node_modules/.bin/create-react-app app

なら次はパスを指定してプロジェクトを作成してみる

ホームディレクトリ直下にプロジェクトが作成された。
npm startで問題なくローカルサーバーを起動できた。

$ ../node_modules/.bin/create-react-app app2

じゃあ次は自分で作ったideaディレクトリでプロジェクトを作成してみる。

いけた。

つまり、グローバルインストールしたパッケージは自動的にパスが通ってどこからでも使えるようになるのに対して、
ローカルインストールしたパッケージはパスが通っていないのでパスを指定して使わないといけないってことみたい。

ローカルインストールしたパッケージをプロジェクトごとにいちいちパスを指定して実行するのは結構めんどくさいので、
グローバルインストールしておいていつでもどこでも使えるようにしておくのが安パイ。

npxでcreate-react-appをインストール

npmがどんな感じなのかはある程度わかったので次はnpxを使用してcraをインストールしてみる。
npxに関してはマジで何もわかってないのでとりあえずnpmと同じように色々実験してみる。

npxはパッケージをインストールするコマンドではない？

$ npx -g install create-react-app

とりあえずcraをグローバルインストールでぶち込んでみる。

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sakai_yu/.npm/_logs/2021-07-30T06_49_02_317Z-debug.log

うぉ、怒られた。
DeepL様にエラーを和訳していただくと、「 /Users/sakaiyu/.npm/logs/2021-07-にログがあるよ」と教えたいただいたのでとりあえず行ってみる。

正直読みたくない。
DeepL様に和訳していただいたが正直何を言っているのかがわからない。

$ which create-react-app

念の為craを探してみたけど

create-react-app not found

当然見つからない
どうやらnpxはパッケージをインストールするコマンドではないっぽい?

PCにインストールしていないcreate-react-appをnpxで実行してみる

$ npx create-react-app app3

なら次はグローバルにもローカルにもインストールしてないcraをnpxで実行してみる。(悪あがき)

え？まじ？
できてしまった。

$ which create-react-app

探してみるけど

create-react-app not found

ない！！

じゃあnpxは、npmレジストリにあるパッケージをpcにインストールせずに使うことができるコマンドてこと？強すぎん？
ちょっと一旦調べてみる。

npxの役割

https://blog.3qe.us/entry/2019/10/17/150753
この記事書いてる人が言うには、npxの役割は
・ローカルに存在しないコマンドでも一時的にダウンロードして実行する
・ローカルにインストールしたnpm packageのコマンドを透過的に実行する
この2つらしい。
と言うことは、さっきnpxで実行できたcraは一時的にPCにインストールされてるけど、実行が終わると同時に削除されてるってことか。
メリットとしてはnpmでパッケージをインストールしまくってメモリが圧迫されたりすることが少なくなるみたいな感じかな。
そう考えるとnpxめちゃくちゃ便利。

2つ目の
・ローカルにインストールしたnpm packageのコマンドを透過的に実行する
ってどう言う意味だろ。
パスを指定しなくてもローカルインストールしたパッケージを探してきて実行してきてくれるみたいな感じかな？
実験してみよう。

$ npm -l install create-react-app

ローカルにcraをインストールして

$ which create-react-app
create-react-app not found

パスが通っていないことを確認。

$ npx create-react-app app4

npxでcreate-react-appを実行してみる。


いけた！まじか！
でもこれだと、npxがnpmレジストリから持ってきたcraを使ってるのかローカルにインストールしたcraを使ってるのかがわからんな。
~~~
~~~
色々考えたんですけどこれがわかるようになる方法が今の知識では全く思いつかないので諦めます！
頼んだ未来の俺！

まとめ

npxはパッケージが自分のPCになかったら自動的にnpmレジストリからパッケージを探して実行してくれる優れもの。
ローカルにあるパッケージもパスを指定せずに使うことができる！
実験形式でやっていったのでnpmとnpxの違いがいい感じにわかりました〜
最後までご覧いただきありがとうございました！