𝗔𝗽𝗮 𝗬𝗮𝗻𝗴 𝗕𝗲𝗿𝗹𝗮𝗸𝘂 𝗔𝗽𝗮𝗯𝗶𝗹𝗮 𝗔𝗻𝗱𝗮 𝗠𝗲𝗻𝗷𝗮𝗹𝗮𝗻𝗸𝗮𝗻 𝗣𝗲𝗿𝗶𝗻𝘁𝗮𝗵 𝗻𝗽𝗺?

Anda menekan enter pada perintah npm. Projek anda dibina. Ia terasa seperti magis.

Ia bukan magis. Ia adalah siri permintaan rangkaian, analisis kod, dan pengoptimuman fail.

Berhenti menjalankan perintah secara membuta tuli. Sebaliknya, fahami enjin di sebaliknya.

Berikut adalah apa yang berlaku di sebalik 6 perintah teras yang anda gunakan setiap hari.

  1. npm install

Perintah ini membaca fail package.json anda. Ia menghubungi registry awan untuk mencari versi alatan yang betul.

  • Ia memuat turun pakej daripada registry.
  • Ia mencipta folder node_modules.
  • Ia membina pokok kebergantungan (dependency tree).
  • Ia mengemas kini package-lock.json untuk merekodkan versi yang tepat.
  1. npm run format:check

Ini adalah langkah pengesahan. Ia menyemak sama ada kod anda mematuhi peraturan gaya anda tanpa mengubah apa-apa.

  • Ia membina susun atur maya fail anda.
  • Ia membandingkan fail anda dengan peraturan seperti Prettier.
  • Ia menandakan ralat jika jarak atau sintaks anda salah.

Untuk membetulkan ralat ini, jalankan npm run format. Perintah ini menggunakan Prettier untuk menulis semula fail anda ke gaya yang betul.

  1. npm run lint

Anggaplah ini sebagai penyemak ejaan untuk kod anda. ESLint mencari ralat yang merosakkan logik anda.

  • Ia mencari ralat sintaks.
  • Ia mengenal pasti pemboleh ubah yang tidak digunakan.
  • Ia mengesan import yang hilang.
  • Ia menandakan penggunaan React Hook yang salah.
  1. npm run build

Perintah ini menyediakan aplikasi anda untuk dunia sebenar. Ia mencipta folder dist.

  • Ia menggunakan bundler untuk melakukan tree shaking. Ini memadamkan kod yang anda import tetapi tidak pernah digunakan.
  • Ia melakukan minification. Ini membuang ruang kosong (whitespace) dan menamakan semula pemboleh ubah untuk menjimatkan bait.
  • Ia memproses CSS dan aset.
  • Ia menghasilkan fail statik yang dioptimumkan dan sedia untuk pelayan.
  1. npm run dev

Ini memulakan pelayan pembangunan tempatan anda. Jika anda menggunakan Vite, ia menggunakan Native ES Modules.

  • Ia menyusun (compile) fail hanya apabila pelayar anda memintanya.
  • Ia menggunakan WebSockets untuk Hot Module Replacement (HMR).
  • Ia menukar kod yang disunting dalam pelayar anda secara serta-merta tanpa penyegaran halaman penuh.
  1. npm run preview

Gunakan ini untuk menyemak semula kerja anda sebelum anda melakukan deployment. Perintah ini mengabaikan kod sumber anda. Ia hanya melihat folder dist anda.

  • Ia mensimulasikan bagaimana aplikasi anda berfungsi pada Vercel atau AWS.
  • Ia menyediakan binaan produksi (production build) anda pada pelayan tempatan.

Terminal bukanlah sebuah kotak hitam. Apabila anda memahami alatan anda, anda menyahpepijat (debug) dengan lebih cepat.

Perintah apakah yang mengubah aliran kerja anda sebaik sahaja anda mempelajari cara ia berfungsi? Beritahu saya di bawah.

Keajaiban di Sebalik Terminal: Apa Sebenarnya yang Berlaku Apabila Anda Menjalankan Perintah npm

Pernahkah anda terfikir apa yang berlaku di sebalik tabir apabila anda menaip npm install di terminal anda? Ia kelihatan seperti satu proses yang ringkas—anda taip perintah, bar kemajuan muncul, dan dalam beberapa saat, semuanya sedia untuk digunakan. Namun, di sebalik tabir, terdapat satu orkestra proses yang kompleks yang sedang berlaku.

Dalam artikel ini, kita akan menyelami apa yang sebenarnya berlaku apabila anda menjalankan perintah npm.

1. Lapisan CLI (The CLI Layer)

Segalanya bermula apabila anda menekan Enter. Perintah yang anda taip ditangkap oleh Command Line Interface (CLI) npm.

Tugas pertama CLI adalah untuk parsing (menganalisis) argumen yang anda berikan. Ia perlu menentukan:

  • Apakah perintah utama? (contohnya: install, test, run)
  • Apakah flag yang disertakan? (contohnya: -g, --save-dev)
  • Adakah terdapat argumen tambahan?

Setelah perintah dianalisis, npm akan memulakan logik dalaman untuk melaksanakan tindakan yang diminta.

2. Resolusi Kebergantungan (Dependency Resolution)

Ini adalah bahagian yang paling kritikal dan kompleks. npm perlu membina sebuah dependency tree (pokok kebergantungan).

Apabila anda memasang satu pakej, pakej tersebut mungkin memerlukan pakej lain untuk berfungsi. Pakej-pakej ini dipanggil dependencies (kebergantungan). Proses ini melibatkan:

  • Membaca package.json: npm melihat senarai dependencies dan devDependencies yang anda nyatakan.
  • Semver (Semantic Versioning): npm menggunakan peraturan Semantic Versioning untuk menentukan versi mana yang paling sesuai untuk dipasang berdasarkan julat yang anda tetapkan (contohnya: ^1.2.3).
  • Membina Pokok: npm akan menelusuri setiap kebergantungan secara rekursif untuk memastikan semua keperluan dipenuhi tanpa konflik versi.

3. Komunikasi dengan npm Registry

Setelah senarai kebergantungan dikenal pasti, npm perlu mendapatkan fail-fail tersebut. Di sinilah npm Registry memainkan peranan.

npm akan membuat permintaan HTTP ke registry (biasanya https://registry.npmjs.org/) untuk:

  • Mendapatkan metadata tentang pakej (versi yang tersedia, pengarang, dll.).
  • Mendapatkan URL untuk memuat turun tarball (fail mampat) bagi setiap versi pakej yang diperlukan.

4. Pemasangan Fail dan node_modules

Setelah fail dimuat turun, npm akan mula mengekstraknya.

  • Pengekstrakan: Fail tarball diekstrak ke dalam folder node_modules dalam projek anda.
  • Struktur Folder: Sebelum ini, node_modules sangat dalam dan bersarang (nested). Walau bagaimanapun, dengan algoritma pemasangan moden, npm cuba mendatarkan (flatten) struktur ini untuk mengurangkan saiz dan mengelakkan duplikasi.
  • package-lock.json: Untuk memastikan pemasangan yang konsisten pada masa hadapan, npm akan mencatat struktur pokok kebergantungan yang tepat dan versi spesifik yang dipasang ke dalam fail package-lock.json.

5. Skrip Kitaran Hayat (Lifecycle Scripts)

npm bukan sekadar memuat turun fail; ia juga boleh menjalankan skrip tertentu sebagai sebahagian daripada proses pemasangan. Ini dikenali sebagai lifecycle scripts.

Beberapa skrip yang biasa digunakan termasuk:

  • preinstall: Dijalankan sebelum pemasangan bermula.
  • postinstall: Dijalankan selepas pemasangan selesai (sering digunakan untuk membina modul asli/native modules).
  • prepublish, prepare, postpublish: Digunakan semasa proses penerbitan pakej.

Kesimpulan

Apa yang kelihatan seperti satu perintah ringkas sebenarnya melibatkan analisis argumen, resolusi algoritma yang kompleks, komunikasi rangkaian, pengurusan fail, dan pelaksanaan skrip. Memahami proses ini membantu anda menjadi pembangun yang lebih baik dan memudahkan anda melakukan penyahpepijatan (debugging) apabila masalah timbul dalam persekitaran pembangunan anda.