JavaScript Preparation — Node.js & WordPress Scripts

Tujuan

Menyiapkan environment JavaScript untuk WordPress theme development menggunakan @wordpress/scripts — official build tool dari WordPress.

---

Mengapa Butuh Build Tool?

Dalam modern web development, JavaScript perlu:

• Dibundle — menggabungkan banyak file JS jadi satu
• Dikompilasi — mengubah syntax modern ke format yang dipahami semua browser
• Diminifikasi — mengurangi ukuran file untuk produksi

Bahkan theme resmi WordPress (Twenty Twenty-One, dll.) menggunakan build tool — bisa dilihat dari adanya package.json di folder theme mereka.

---

Langkah 1: Install Node.js

1. Kunjungi https://nodejs.org
2. Download versi LTS atau Current (keduanya OK)
3. Install dengan opsi default (next, next, next)
4. Verifikasi di terminal:

node --version
# Output: v18.x.x (atau versi lainnya)

---

Langkah 2: File package.json

File package.json = "resep" atau daftar dependensi proyek. Salin dari repo university-static-master ke root folder theme.

Isi package.json (Dependencies)

Package	Fungsi
@wordpress/scripts	Official WordPress build tool (Webpack + Babel + PostCSS)
@glidejs/glide	Slideshow/carousel untuk homepage
normalize.css	CSS reset untuk konsistensi antar browser
axios	HTTP client untuk AJAX requests (nanti)

Scripts di package.json

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  }
}

Script	Perilaku
npm run start	Watch mode — jalan terus di background, otomatis re-bundle saat file berubah
npm run build	Satu kali build — bundle & selesai

---

Langkah 3: Install Dependencies

# Di terminal, pastikan CWD = folder theme
npm install

Ini akan membuat folder node_modules/ (jangan di-commit ke Git).

---

Langkah 4: Jalankan Build Tool

npm run start

Sekarang tool ini watching — setiap kali save file di src/, otomatis re-bundle ke build/.

Untuk menghentikan: Ctrl + C

---

Struktur Folder

theme-folder/
├── src/                    ← SOURCE CODE (kita edit di sini)
│   ├── index.js            ← Entry point JavaScript
│   └── ... (import CSS di sini juga)
├── build/                  ← OUTPUT (jangan edit langsung!)
│   ├── index.js            ← JS terbundle & terminifikasi
│   └── index.css           ← CSS terbundle
├── css/                    ← SASS/CSS modules
│   └── modules/
│       └── _headline.scss
├── package.json
└── node_modules/           ← Dependencies (jangan commit)

Aturan Penting

Folder	Edit?	Penjelasan
src/	✅ Ya	Source code kita — readable oleh developer
build/	❌ Jangan	Output otomatis — optimized untuk browser
node_modules/	❌ Jangan	Dependencies — bisa direcreate dengan npm install

⚠️ File di build/ adalah yang di-load di functions.php (via wp_enqueue_script / wp_enqueue_style). File di src/ tidak pernah langsung dimuat oleh browser.

---

Tes Cepat

1. Buka src/index.js
2. Tambahkan: alert("Hello, this is a test!");
3. Save → lihat terminal re-bundle
4. Refresh website → muncul alert popup
5. Hapus alert setelah tes berhasil

---

Catatan Tambahan

Import Finished Product (Opsional)

Jika ingin skip course dan langsung lihat final product:

1. Buat WordPress installation baru (kosong)
2. Install plugin All-in-One WP Migration (by ServMask)
3. Import file .wpress dari resources Udemy
4. Login: username admin, password admin
5. Settings → Permalinks → Save Changes (rebuild permalinks)
6. Jalankan npm install lalu npm run start di folder theme

⚠️ Import akan menimpa seluruh WordPress installation yang ada. Hanya lakukan di installation kosong/baru.