Belajar Svelte - Tooling Modern & Build Automation

#Pendahuluan

Proyek modern tidak bergantung pada ingatan manusia. Alat yang terpasang dengan benar — kompiler, type checker, linter, dan pipeline otomatis — menjaga kualitas setiap kali kode berubah.

Episode ini membahas Vite dan SvelteKit sebagai build tooling, integrasi TypeScript dengan strict mode, pipeline CI/CD untuk aplikasi Svelte, serta linting, formatting, dan pre-commit hooks.

Setelah selesai, kalian punya rantai alat yang menangkap kesalahan lebih awal dan menegakkan konsistensi tanpa perdebatan manual. Investasi kecil pada alat terbayar setiap kali ada bug yang tertangkap sebelum sampai produksi.

#Vite, SvelteKit, dan Build Tooling

#Satu Build Pipeline

SvelteKit dibangun di atas Vite. Semua transformasi — Svelte, TypeScript, CSS, dan aset — melewati satu pipeline yang sama. Konfigurasi tambahan ditulis di vite.config.ts, sementara perilaku SvelteKit diatur di svelte.config.js.

Command yang dipakai sehari-hari:

npm run dev
npm run build
npm run preview

npm run build menghasilkan output produksi sesuai adapter yang dipasang, dan npm run preview menjalankan hasil build secara lokal untuk verifikasi sebelum deploy.

#TypeScript Integration dan Strict Mode

#Mengaktifkan Type Checking Penuh

TypeScript menangkap kesalahan sebelum kode dijalankan. Aktifkan strict mode penuh di tsconfig.json untuk menjadikan type checking sebagai jaring pengaman yang nyata:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true
  }
}

strict: true mengaktifkan sekumpulan pemeriksaan ketat, termasuk penanganan null dan undefined secara eksplisit. noUncheckedIndexedAccess memaksa kalian menghadapi kemungkinan indeks tidak ada. Hasilnya: lebih banyak eror saat mengetik, jauh lebih sedikit saat runtime.

#svelte-check di Setiap Perubahan

Jalankan npx svelte-check secara berkala atau lewat script check. Alat ini memahami sintaks .svelte dan memeriksa tipe di template, skrip, dan lintas file — sesuatu yang tidak bisa dilakukan type checker biasa secara menyeluruh.

#CI/CD Pipeline untuk Svelte Apps

#Pipeline Build di GitHub Actions

CI menjalankan pemeriksaan di setiap commit. Pipeline minimal memeriksa, lint, lalu build:

name: ci
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run check
      - run: npm run lint
      - run: npm run build

actions/setup-node@v4 menyiapkan Node di runner. npm ci menginstal dependensi secara deterministik dari lockfile. Gagal di salah satu langkah akan menghentikan pipeline — commit yang merusak tidak pernah lanjut ke deploy.

#Deployment Otomatis

Langkah deploy biasanya dipisah ke job terpisah yang berjalan setelah semua pemeriksaan hijau. Secret seperti token deploy disimpan di GitHub Secrets dan diinject sebagai environment variable saat pipeline berjalan.

#Linting, Formatting, dan Pre-commit Hooks

#ESLint dan Prettier

ESLint menangkap pola kode bermasalah; Prettier menyamakan format tanpa perdebatan gaya. Keduanya bekerja berpasangan: ESLint untuk logika, Prettier untuk konsistensi tampilan.

#Hook Sebelum Commit

Hooks memastikan kode sudah bersih sebelum masuk riwayat. Husky menjalankan lint-staged pada file yang berubah:

npm install -D husky lint-staged
npx husky init

Husky membuat folder .husky dengan hook pre-commit. Konfigurasi lint-staged di package.json menentukan perintah yang dijalankan untuk file yang staged — misalnya format dan lint hanya pada file yang benar-benar diubah, bukan seluruh proyek.

#Penutup

Inti yang harus dibawa pulang:

• Vite dan SvelteKit berbagi satu build pipeline.
• Aktifkan strict mode dan noUncheckedIndexedAccess di TypeScript.
• Jalankan svelte-check, lint, dan build di CI setiap commit.
• Pisahkan deploy ke job yang berjalan setelah pemeriksaan hijau.
• Simpan secret di GitHub Secrets, bukan di repository.
• Gunakan Husky dan lint-staged untuk menjaga kualitas sebelum commit.

Di episode 20 selanjutnya kalian akan belajar deployment & hosting — pilihan platform seperti Vercel, Netlify, dan Cloudflare Pages, adapter SvelteKit dan serverless deployment, optimasi output produksi, serta caching dan integrasi CDN. Pipeline CI dari episode ini akan memicu deploy ke platform tersebut.