npm run devがどういうコマンドか

Question

前提

現在Laravel9でサイトを作っています。
npm run devをなぜ使うのか、実行してない際はなぜレイアウトが崩れるのかわからず調べていて、以下のような内容が出てきました。

• npmはNode.jsをインストールするときについてくるパッケージ管理ツール
• npm run はLaravelの独自コマンド
• npm runにdevやprod, watchをつけることでビルドができる
• dev, watchはビルドの際コンパイルを、prodはコンパイルと圧縮を行う

---

質問は以下の3つです。

• 上記の認識は間違っていないか
• PHPをコンパイルするとはどういうことなのか（インタプリタ言語ではないのか）
• コマンド実行中はレイアウトが正しいのに、Ctrl+Cで終了すると崩れるのはなぜなのか。コンパイルしたなら実行ファイルができるのではないのか？

初学者のため見当違いの質問をしているかもしれませんが、どなたか解答いただけると幸いです。

Answer 1

見た説明がすでに古い。
prod, watchが出てくるのはLaravel mix時代の説明。

• 2015年 Laravel5.0 Laravel Elixir https://laravel.com/docs/5.0/elixir
• ElixirがLaravel mixに改名 https://laravel.com/docs/5.4/mix
• 2022年 mixは完全に捨ててViteに変更 https://laravel.com/docs/9.x/vite

Laravel9.x期間の途中でviteに変更なんて破棄的変更を容赦なくやったので初心者は当然混乱する。

viteに変わっても基本的な使い方が変わらないようにnpm run devはそのまま残したけど同じdevだけど動作は全く違う。
viteのdevはmixでのwatchと同じ動作。Laravel側のファイルを変更したら自動で再ビルドしたりブラウザをリロードしたり「開発中に使うコマンド」。viteのdevではjs/cssファイルは作られないのでdevを止めたらcssファイルがないので崩れる。
buildはprodと同じ。「本番用のjs/cssファイルを作るコマンド」。devを止めても正しく表示するにはnpm run buildを使う。

「JSやCSSもビルドして使う」はここ10年くらいのフロントの新しい常識。常識なのでLaravelでも当然知ってる前提で進むけどLaravel周辺はフロントのことを理解してない人が多すぎる。「PHP覚えたからLaravelも使えるはず」とやってきた初心者がフロントの知識がなくてことごとく撃沈している。
Laravel方面からフロントを調べても理解できないのでフロントのことはフロントだけで覚える。その後にLaravelに戻って来れば「Laravelとフロントを繋ぐ部分」はLaravelが用意していると分かる。

Comments

[Saya_a]

返信が遅くなり申し訳ありません、細かく教えていただけとても助かります。Laravel9対応の教材を見つけられず、Laravel7対応の本で勉強していたので認識があちこち古かったんだなと気付けました。
ご察しの通り今までPHP中心で勉強していて、フロントはちょっと触っただけでしたので改めて勉強しようと思います。
ご回答ありがとうございました！

Answer 2

npm run コマンドの実行内容は package.json の定義にありますね
以下の例だと vite が実行されるみたいですね

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
}

Comments

[Saya_a]

ご回答ありがとうございます！
Vite.jsというものを初めて知ったので、勉強しようと思います。