Belajar JavaScript - Build Tools, Bundler, dan Lingkungan Runtime

#Pendahuluan

Sampai episode 20, kalian menjalankan kode dengan node dan menguji di browser. Di project nyata, ada satu lapisan lagi yang menghubungkan kode sumber dengan aplikasi yang benar-benar berjalan: build tools dan bundler. Mereka menggabungkan banyak file modul menjadi bundle yang siap melayani pengguna, dengan kecepatan dan ukuran yang optimal.

Episode 21 membedah lapisan ini dari dua sisi. Pertama, runtime — mesin tempat JavaScript berjalan: Node.js, Deno, dan Bun. Kedua, bundler — alat yang menyatukan modul: Vite, esbuild, Webpack, dan Rollup. Kalian juga akan membuat project nyata dengan Vite dan menjalankan build script-nya.

Ini episode yang menghubungkan banyak topik sebelumnya: modul dari episode 10, tooling dari episode 20, dan akan berujung pada optimasi di episode 22.

#Lingkungan Runtime JavaScript

#Node.js, Deno, dan Bun

Runtime adalah lingkungan yang mengeksekusi JavaScript di luar browser. Tiga runtime utama di ekosistem saat ini:

• Node.js: runtime paling tua dan paling mapan, berbasis engine V8, dengan ekosistem npm terbesar.
• Deno: runtime modern dengan keamanan default dan dukungan TypeScript bawaan.
• Bun: runtime cepat yang menulis runtime, package manager, dan bundler dalam satu alat.

node --version
deno --version
bun --version

node --version menampilkan versi Node. Perintah deno --version dan bun --version hanya berjalan jika runtime tersebut diinstall. Untuk series ini, Node.js adalah fokus utama karena ekosistemnya paling luas dan paling banyak dipakai di produksi.

#Perbedaan yang Membuat Mereka Berbeda

Keputusan memilih runtime bergantung pada kebutuhan:

• Node.js: pilihan default untuk produksi, kompatibilitas tertinggi.
• Deno: lebih aman dan lebih sederhana untuk project baru yang mandiri.
• Bun: pilihan untuk kecepatan development dan tooling terpadu.

Ketiganya menjalankan JavaScript yang sama — modul ES, fetch, async/await — karena semua mendukung standar. Yang membedakan adalah kecepatan, keamanan, dan ekosistem di sekitarnya. Kode kalian dari episode 1 sampai 20 berjalan di ketiganya dengan sedikit penyesuaian.

#Bundler dan Build Tools

#Mengapa Perlu Bundler

Browser memuat modul ES dengan pernyataan import — tapi tiap request punya biaya jaringan. Membiarkan browser memuat ratusan file modul satu per satu membuat halaman lambat. Bundler menyelesaikan ini: menggabungkan semua modul menjadi satu (atau beberapa) file bundle yang ringkas.

npm run build

npm run build menjalankan script build yang memanggil bundler. Hasilnya: kode sumber yang mudah dibaca berubah menjadi bundle yang dioptimalkan — file lebih kecil, dependensi digabung, dan fitur modern ditransformasi agar kompatibel dengan browser lama.

#Berkenalan dengan Bundler Populer

Empat bundler yang paling banyak dipakai, masing-masing dengan kekuatan berbeda:

• Vite: modern dan cepat, memakai esbuild untuk development dan Rollup untuk produksi.
• esbuild: bundler berbahasa Go, sangat cepat, sering dipakai sebagai fondasi alat lain.
• Webpack: paling mapan dan paling bisa dikonfigurasi, ekosistem plugin terbesar.
• Rollup: fokus pada bundle library, output yang bersih dan efisien.

Untuk project baru, Vite adalah pilihan yang paling sering disarankan karena kecepatan dan pengalaman pengembangannya.

#Membuat Project dengan Vite

#Scaffolding Project Baru

Vite menyediakan template resmi untuk berbagai framework. Untuk JavaScript murni:

npm create vite@latest project-js -- --template vanilla
cd project-js
npm install

npm create vite@latest project-js -- --template vanilla membuat project Vite kosong dengan template vanilla JavaScript. npm install menarik semua dependensi. Setelah selesai, struktur project siap dijalankan dan dibangun.

#Menjalankan Development Server

Mode development memakai server dengan hot module replacement — perubahan file langsung terlihat tanpa reload manual:

npm run dev

npm run dev memulai server pengembangan di http://localhost:5173. Fitur yang dirasakan langsung: perubahan kode direfleksikan seketika, dan error modul ditampilkan jelas di layar. Mode inilah yang dipakai sehari-hari saat mengembangkan aplikasi.

#Membangun untuk Produksi

Saat aplikasi siap dirilis, jalankan build produksi:

npm run build
npm run preview

npm run build menghasilkan file siap pakai di direktori dist — gabungan modul yang diminifikasi, aset yang dioptimalkan, dan nama file yang di-hash untuk cache. npm run preview melayani hasil build secara lokal agar bisa diperiksa sebelum di-deploy. Inilah artefak yang dipakai di production.

#Package Manager Modern

#npm, pnpm, yarn, dan Bun

Package manager adalah bagian dari lapisan runtime yang sering diremehkan. Keempat yang dominan:

• npm: bawaan Node, paling banyak dipakai.
• pnpm: cepat dengan penyimpanan terdeduplikasi dan node_modules yang rapi.
• yarn: alternatif klasik dengan fokus kecepatan.
• bun: package manager bawaan runtime Bun, sangat cepat.

pnpm install

pnpm install memasang dependensi project. pnpm menghemat disk dengan berbagi file antar project dan memperketat struktur node_modules, yang mencegah bug akses silang. Keputusan memilih package manager sering ditentukan kebiasaan tim, tapi semua memahami package.json yang sama.

#package.json dan Lockfile

Dua file yang mengatur seluruh dependensi project:

• package.json: daftar dependensi dan rentang versi yang diizinkan.
• package-lock.json: versi persis yang terinstall, menjamin build yang reproducible.

Lockfile wajib di-commit ke repositori. Dengan lockfile, mesin npm ci menginstall versi yang persis sama di laptop pengembang, CI, dan server produksi — tidak ada lagi "tapi jalan di laptop saya".

#Penutup

Episode 21 menutup lapisan tooling: runtime Node.js, Deno, dan Bun sebagai lingkungan eksekusi, bundler Vite, esbuild, Webpack, dan Rollup sebagai penghubung kode sumber ke produksi, serta praktik scaffolding, development, dan build produksi dengan Vite. Kalian juga memahami peran package manager dan lockfile.

Inti yang harus dibawa pulang:

• Runtime mengeksekusi JavaScript: Node.js paling mapan, Deno lebih aman, Bun paling cepat.
• Bundler menggabungkan modul menjadi bundle yang dioptimalkan.
• npm create vite@latest membuat project baru dengan cepat.
• npm run dev untuk development, npm run build untuk produksi.
• Hasil build masuk ke dist dan bisa dicek dengan npm run preview.
• Commmit lockfile agar instalasi reproducible di semua lingkungan.

Di episode 22 selanjutnya kita akan membahas performance, memory, dan optimasi kode — mengukur dan memperbaiki kinerja aplikasi, menghindari kebocoran memory, dan menerapkan pola seperti debounce dan lazy loading. Episode ini juga menutup seri dengan praktik kode siap produksi dan best practice.