npmコマンドを実行すると何が起きるのか？
npmコマンドを入力してEnterキーを押し、待つ。すると突然、プロジェクトが動く。まるで魔法のように感じる。
それは魔法ではありません。一連のネットワークリクエスト、コードのパース、そしてファイルの最適化が行われているのです。
盲目的にコマンドを実行するのはやめましょう。これら6つの主要なコマンドの背後にある仕組みを理解しましょう。
npm install このコマンドは
package.jsonを読み取ります。クラウドレジストリにアクセスして、依存関係を探し出します。 • パッケージをnode_modulesフォルダにダウンロードします。 • バージョンの競合を解決します。 • 正確なバージョンを記録するためにpackage-lock.jsonを作成します。npm run format:check これは検証ステップです。Prettierなどのツールを使用してファイルをスキャンします。 • コードの仮想的なレイアウトを構築します。 • コードをスタイルルールと比較します。 • ファイルを変更することなく、エラーを指摘します。
npm run format このコマンドは、チェック中に見つかった問題を修正します。 • プロジェクトに対して Prettier を実行します。 • スタイルルールに一致するようにファイルを書き換えます。 • スペースやフォーマットを自動的に整えます。
npm run lint これはコードのスペルチェッカーのようなものだと考えてください。ESLintは以下のようなエラーをスキャンします： • 構文ミス。 • 未使用の変数。 • インポートの不足。 • 不適切な React Hook の使用。
npm run build このコマンドは、アプリを本番環境に向けて準備します。
distフォルダを作成します。 • tree shaking を行い、未使用のコードを削除します。 • 空白を削除し、変数名を短縮することでコードを minify（軽量化）します。 • JavaScript、CSS、およびアセットを最適化されたファイルにバンドルします。 • これらのファイルは、サーバーへのデプロイ準備が整った状態になります。npm run dev 開発用のローカルサーバーを起動します。 • Native ES Modules を使用し、ブラウザが要求したときのみファイルをコンパイルします。 • Hot Module Replacement (HMR) を使用して、ページをリフレッシュすることなくサイトを即座に更新します。
npm run preview これは最終確認です。ソースコードは無視し、
distフォルダのみを確認します。 • アプリが実際のサーバー上でどのように動作するかをシミュレートします。 • 本番環境にデプロイする前にバグを見つけるのに役立ちます。
ターミナルはブラックボックスではありません。これらのツールの仕組みを理解していれば、問題が発生したときに素早くデバッグできます。
仕組みを知ったことで、コーディングの仕方が変わったコマンドはありますか？ぜひ以下で教えてください。