Apa yang Terjadi Saat Anda Menjalankan Perintah npm?

Anda menekan Enter pada perintah npm dan menunggu. Tiba-tiba, proyek Anda berjalan. Rasanya seperti sihir.

Itu bukan sihir. Itu adalah serangkaian permintaan jaringan, parsing kode, dan optimasi file.

Berhentilah menjalankan perintah secara membabi buta. Pahami mesin di balik 6 perintah inti ini.

  1. npm install Perintah ini membaca package.json Anda. Ia menghubungi registry cloud untuk menemukan dependensi Anda. • Ia mengunduh paket ke dalam folder node_modules. • Ia menyelesaikan konflik versi. • Ia membuat package-lock.json untuk mencatat versi yang tepat.

  2. npm run format:check Ini adalah langkah verifikasi. Ia menggunakan alat seperti Prettier untuk memindai file Anda. • Ia membangun tata letak virtual dari kode Anda. • Ia membandingkan kode Anda dengan aturan gaya Anda. • Ia menandai kesalahan tanpa mengubah file Anda.

  3. npm run format Perintah ini memperbaiki masalah yang ditemukan selama pengecekan. • Ia menjalankan Prettier pada proyek Anda. • Ia menulis ulang file Anda agar sesuai dengan aturan gaya Anda. • Ia merapikan spasi dan pemformatan secara otomatis.

  4. npm run lint Anggap ini sebagai pemeriksa ejaan (spellchecker) untuk kode Anda. ESLint memindai kesalahan seperti: • Kesalahan sintaksis. • Variabel yang tidak digunakan. • Import yang hilang. • Penggunaan React Hook yang salah.

  5. npm run build Perintah ini mempersiapkan aplikasi Anda untuk dunia nyata. Ia membuat folder dist. • Ia melakukan tree shaking untuk menghapus kode yang tidak digunakan. • Ia melakukan minifikasi kode dengan menghapus spasi kosong dan memperpendek nama variabel. • Ia membundel JavaScript, CSS, dan aset ke dalam file yang dioptimalkan. • File-file ini siap untuk dideploy ke server.

  6. npm run dev Ini memulai server lokal untuk Anda bekerja. • Ia menggunakan Native ES Modules untuk mengompilasi file hanya saat browser Anda memintanya. • Ia menggunakan Hot Module Replacement (HMR) untuk memperbarui situs Anda secara instan tanpa penyegaran halaman (page refresh).

  7. npm run preview Ini adalah pengecekan terakhir Anda. Ia mengabaikan kode sumber Anda dan hanya melihat folder dist. • Ia mensimulasikan bagaimana aplikasi Anda akan berjalan di server asli. • Ia membantu Anda menemukan bug sebelum Anda melakukan deploy ke produksi.

Terminal bukanlah kotak hitam. Memahami alat-alat ini membantu Anda melakukan debugging lebih cepat saat terjadi masalah.

Perintah apa yang mengubah cara Anda menulis kode setelah Anda mempelajari cara kerjanya? Beritahu saya di bawah.

Sumber: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba