Mengelola Kode Modern dengan Module dan NPM

Sejauh ini semua kode latihanmu mungkin tinggal dalam satu file. Itu wajar untuk latihan, tapi bayangkan kalau aplikasimu punya 5.000 baris kode dalam satu file. Mencari satu function saja bisa bikin pusing, apalagi kerja bareng orang lain.

Solusinya adalah module: memecah kode menjadi file-file kecil yang masing-masing punya tugas jelas, lalu saling terhubung lewat import dan export. Dan kalau kamu butuh kode buatan orang lain (misalnya library untuk format tanggal), kamu tidak perlu menulis ulang: tinggal ambil dari NPM, gudang library JavaScript terbesar di dunia.

Ini episode #47 dari seri JavaScript Modern. Setelah ini kamu akan paham struktur proyek JavaScript profesional, yang 100% dipakai di React dan Node.js nanti.

Module: Dapur yang Terorganisir

Analoginya begini. Dapur yang baik tidak menaruh semua bahan dalam satu karung raksasa. Beras di toples beras, minyak di botol minyak, bumbu di rak bumbu. Masing-masing berlabel jelas, dan koki mengambil yang dibutuhkan saja.

Module bekerja dengan prinsip yang sama. Satu file = satu tanggung jawab. File matematika.js hanya berisi function matematika, file format.js hanya berisi function format tanggal, dan file utama tinggal mengambil yang dibutuhkan.

Ada dua kata kunci yang perlu kamu kuasai:

• export: menandai "barang ini boleh diambil file lain". Seperti memberi label pada toples.
• import: mengambil barang dari file lain. Seperti koki mengambil toples dari rak.

// File: matematika.js
export function tambah(a, b) {
  return a + b;
}
export function kali(a, b) {
  return a * b;
}
export const PI = 3.14;

// File: app.js
import { tambah, PI } from './matematika.js';

console.log(tambah(2, 3)); // 5
console.log(PI);           // 3.14

Perhatikan tiga detail penting:

1. Nama di dalam kurung kurawal import harus persis sama dengan nama yang di-export.
2. Path-nya diawali ./ (artinya "file di folder yang sama") dan wajib menyertakan ekstensi .js. Ini aturan ES module yang sering bikin pemula error.
3. Ada juga default export (satu barang utama per file, di-import tanpa kurung kurawal), tapi untuk sekarang kuasai named export dulu.

NPM: Supermarket Library Gratis

Sekarang, bagaimana kalau kamu butuh kode yang ditulis orang lain? Misalnya library untuk validasi form atau membuat grafik. Menulis sendiri dari nol itu buang waktu. Di sinilah NPM (Node Package Manager) masuk.

NPM itu seperti supermarket raksasa berisi ratusan ribu "paket" (package) kode gratis yang bisa kamu pasang ke proyekmu. Syaratnya: kamu harus punya Node.js terinstall (karena NPM ikut terinstall bersamanya), dan proyekmu harus punya file package.json.

package.json adalah kartu identitas proyekmu: nama proyek, versi, daftar library yang dipakai, dan perintah-perintah pintasan. Cara membuatnya gampang:

# Masuk ke folder proyekmu, lalu jalankan:
npm init -y

# Install library (contoh: library format tanggal)
npm install date-fns

# Jalankan script yang ada di package.json
npm run dev

Setelah npm install date-fns, tiga hal terjadi:

1. Folder node_modules muncul, berisi file-file library yang diunduh.
2. File package.json dicatat: library date-fns masuk daftar dependencies.
3. File package-lock.json dibuat, mencatat versi persis yang terinstall.

Lalu memakainya semudah import biasa, tanpa path ./ karena ini paket dari NPM, bukan file lokal:

import { format } from 'date-fns';

const hariIni = format(new Date(), 'dd MMMM yyyy');
console.log(hariIni); // mis. "10 Oktober 2026"

Tiga File, Tiga Nasib di Git

Ini yang sering bikin pemula bingung, jadi hafalkan baik-baik:

• package.json: WAJIB masuk Git. Ini daftar belanjaan proyekmu.
• package-lock.json: WAJIB masuk Git. Ini memastikan semua orang (dan server deploy) menginstall versi yang persis sama. Tanpa ini, library bisa ter-update diam-diam dan merusak proyekmu.
• node_modules: JANGAN masuk Git. Folder ini bisa berisi puluhan ribu file dan ukurannya ratusan MB. Cukup tulis node_modules/ di file .gitignore (ingat episode #36?). Siapa pun yang clone repomu tinggal jalankan npm install untuk mengunduh ulang semuanya.

Persepsi yang Perlu Diluruskan

Persepsi salah 1: "Satu file besar tidak masalah selama kodenya jalan." Masalahnya muncul belakangan: susah dicari, susah dites, dan mimpi buruk saat kerja tim. Module bukan soal gaya, tapi soal skalabilitas. Proyek React yang akan kamu buat nanti terdiri dari puluhan file module, dan itu normal.

Persepsi salah 2: "Pakai library itu curang, programmer hebat nulis sendiri." Kebalik. Programmer hebat tahu kapan memakai yang sudah ada dan kapan menulis sendiri. NPM ada supaya kamu fokus ke masalah unik aplikasimu, bukan menulis ulang format tanggal untuk kesekian kalinya.

Latihan: Pecah dan Pasang

1. Ambil proyek to-do list-mu. Pecah menjadi minimal 3 file: data.js (function pengolah data), tampil.js (function render ke DOM), dan app.js (file utama yang meng-import keduanya). Ubah tag script di HTML-mu menjadi <script type="module" src="app.js"></script>.
2. Jalankan npm init -y di folder proyek, install satu library kecil (misalnya date-fns), dan pakai untuk memformat tanggal tugas.
3. Pastikan node_modules ada di .gitignore, lalu push ke GitHub. Cek di github.com: folder node_modules tidak boleh muncul di sana.

Di episode berikutnya kita masuk ke topik yang paling bikin pemula penasaran sekaligus paling sering disalahpahami: Async JavaScript, Promise, dan Async Await. Kenapa JavaScript butuh semua itu? Analoginya seru, sampai jumpa.