npm runの挙動

Question

質問

npm run dev
```をすると、webpackがインストールされていないのに開発サーバーを実行できる理由をご教授いただけないでしょうか。


# 環境
Window10 ubuntu WLS2


#やりたかったこと
質問内容と直接関係ないです。こちらのVue.jsのライブラリを利用して個人開発をしたいです。
[https://github.com/tvjsx/trading-vue-js](https://github.com/tvjsx/trading-vue-js)

#どのようにして疑問が生まれたか
上のリンクをgit cloneしました。
githubのREADMEを参考にし、```npm install```をし、```npm run dev```を行えばサンプル(開発用サーバーが開きlocalhost:8080にhelloworld的なものが表示される)を実行できる状態にしました。
サンプルは実行できたのですが、ふと、```npm run dev```ってなにをしてるの？と思いました。

次にこちらのサイトを見ました。
[https://qiita.com/hashrock/items/15f4a4961183cfbb2658](https://qiita.com/hashrock/items/15f4a4961183cfbb2658)

以下がcloneしたライブラリのpackage.jsonのdevの行です。

"dev": "webpack serve --config webpack/dev.config.js --mode development --progress --hot"

拝見したqiitaの記事によると、

webpack serve --config webpack/dev.config.js --mode development --progress --hot

をターミナルで実行すれば同じことができるそうだったのでやってみると、
webpackがないのでインストールしてくださいというエラーが起こりました。
sudo apt get webpackでwebpackをインストールすると、無事```npm run dev```で行ったのと同じようにサンプルを実行できました。

# 考えたこと
```npm run dev```のときだけwebpackがなくても実行できる理由として、npm runをすると内部処理みたいなのが自動的にインターネットからwebpackのライブラリを一時的に持ってきて実行してくれる仕組み(初心者の妄言なのでなにを言ってるか分からないかもしれませんが)があり、オフラインでやったら失敗するのでは？と思いやってみたところ、普通に動きました。ローカルで完結しているようです

同じ環境(WSL2)のサブ機で同じことをしてみましたが変わらずでした。

webpackについて調べましたが解決せず、こちらで質問させていただきました。

Comments

[hoshi-takanori]

package.json に webpack や webpack-dev-server が入ってますね。
https://github.com/tvjsx/trading-vue-js/blob/master/package.json#L67-L69

npm install の段階で node_modules の中に webpack や webpack-dev-server が入り、scripts から実行できるようになります。

[aya999]

ご回答ありがとうございます！
webpack serve --config webpack/dev.config.js --mode development --progress --hotを
trading-vue-js/ のディレクトリ(package.jsonとかがあるところ)
で実行すると、
bash: /usr/bin/webpack: No such file or directory
というエラーがでます。
私が一度webpackをinstallしたのちapt removeしてしまったせいなのか、
webpackのPATHがおかしくなっているようです。
この /usr/bin/webpack を探しに行くというのはどこで定義されているのでしょうか。

[aya999]

追記

githubで#をつかって行数をハイライトできるの初めて知りました！

[hoshi-takanori]

すでに回答がついてる通り、npm run は node_modules の中の webpack コマンドがある場所を PATH に追加して実行するので、webpack を直接実行しても webpack は見つかりませんが、npm run すれば node_modules の中にある webpack が実行されることになります。

[aya999]

先ほど返信した際、回答に気づいておらず、理解しました。
この場合、回答者様をベストアンサーにせざるを得なく、心苦しいですが、コメントしていただいて本当にありがとうございました。

[hoshi-takanori]

この欄に書いてるのは回答未満だと思ってるからなので、お気になさらず。

追記。github では行番号をクリック (shift + クリック) でその行をハイライトできて、URL にも # が付加されます。

[aya999]

やってみて今感動しています。
本当にありがとうございます！

Answer 1

参考記事: 知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった

Node.jsのpackage.jsonにコマンドラインツール用の記述をして
それをnpm install -gという風に-gオプションで導入すると
nodeやnpmが入っている実行ファイルと同じディレクトリに実行ファイルが追加されて
対応したNode.jsのファイルを実行する挙動を定義できます。

これが第一段階、webpack等のNode.js製コマンドはこうして作られています。
でも毎回-gオプション付きで実行するのは面倒くさい。

そういう要望の為に、普通にnpm install パッケージ名で導入したライブラリは、
node_modules/.bin/配下に実行ファイルとして生成されます。
なのでnpm installでWebpackさえ導入してしまえば、node_modules/.bin/webpack [オプション]で実行出来ます。

ふと、npm run devってなにをしてるの？と思いました。

普段我々がターミナルで何かしらのコマンドを実行していますが、
その時の解決方法は環境変数のPATHに書いてあるディレクトリを左から順番に見ていき、
同名の実行ファイルがあれば実行するし、一つも無ければコマンドないよエラーになるわけです。

package.jsonでnpm-scriptsを定義して実行した場合
一時的に環境変数のPATHにプロジェクトルート/node_modules/.binを追加する挙動をします。
なのでnpm-scripts内ではグローバルインストールしていないwebpackが使えるようになります。

Comments

[aya999]

懇親丁寧なご回答ありがとうございます。
教えていいただいた内容を自分で確かめるため、
node_modules/.bin/webpack serve --config webpack/dev.config.js --mode development --progress --hot
とすると、実行することができました。
webpackの場所は探しましたが.binの中にあるとは。。自分では気づきませんでしたし勉強が必要だと思いました。

この度は誠にありがとうございました。