npm start と npm run dev の違いについて調べてみた
本日のテーマは「npm start と npm run dev の違いについて調べてみた」 という題名で書かせていただきます。
この記事を書くに至った背景
私は、今年の１月ごろからプログラミングを本格的に始めました。以前までは静的なWebサイト作りに勤しんでおりましたが、現在はJavaScriptライブラリであるReactを用いて、個人開発を行っています。コンポーネントライブラリを用いて画面描画を変えてみたり、ReactのフレームワークであるNext.jsでポートフォリオサイトを作ってみたり(未完成ですが...)、Reactに詳しくなりたくて突き進んでいるところです。そんなこんなで個人開発をしていたところ、このようなツイートを見つけました。↓
この投稿者様の投稿を見ると、今までcreate-react-appを当然のごとく使っていましたが、どうやら開発の更新が止まっているようなので、create-viteを使うのが良いようです。
そこで私は新しい個人開発を、今まで使っていたcreate-react-appではなくcreate-viteでやることを決め、Vite＋Reactを使った個人開発という全く新しいことを始めたわけです。
すると、問題はすぐに起きました。
「おかしい... npm start ができない。npm run build が必要なのか？あれ？ビルドしてもできない？？？」
どうやら、create-react-appで作った環境とは異なり、Vite＋Reactではnpm run devコマンドを使うようです。
「じゃあ、何が違うの...？」
そもそも...
そもそも、npmとは何なのか確認していこうと思います。
npmとは、Node Package Managerの略です。
私の理解だと、npmコマンドでパッケージ（複数の、特定の機能を提供するために作られたプログラムコード(module)をまとめたもの）をインストールすると、実際のコードを書くうえで使用することができるようになるもの、でしょうか。
本題
まずはじめに、package.jsonの中身を見てみました。すると...
Debugのところのscripts部分が、 "dev": "vite"となっていることが分かります。この状態で、
1.npm run devを実行すると↓
2.npm startを実行すると
このように、エラーが出てしまいます。
では、Debugのscripts部分を"start: "vite"に変えてみます。
今度は、npm run devでエラーが出てしまいました。
ということは、npm startだとうまく行くのでは？？？
npm startがnpm run startが同義であることもわかりました。
npm run startの場合
まとめ
今回分かったことはVite＋Reactでしか検証していませんが、package.jsonで書かれているDebugのscriptの中を書き換えることで本来ならnpm run devで動くところをnpm run startまたはnpm startと置き換えて実行することができました。
※ちなみに、npm run devのrunはなくすことができませんでした。また、今回出したFirst-MarketというWebサイトは私個人で作ったものとなります。このように検証するようなことができて、知識も増えた気がします。
以上となります。読んでいただきありがとうございました。
Discussion