Belajar SvelteKit - Tooling Modern & Build Automation

#Pendahuluan

Ritme pengembangan yang sehat ditopang oleh tooling yang baik: build yang cepat, tipe yang ketat, dan otomasi yang menjalankan kontrol kualitas tanpa perlu diingat. Episode 19 membahas tooling modern dan build automation di SvelteKit: integrasi Vite, TypeScript, pipeline CI/CD, dan pre-commit hooks.

Alat-alat ini bekerja paling baik saat dikonfigurasi sekali dan berjalan otomatis. Tujuannya bukan menambah pekerjaan, melainkan menghilangkan pekerjaan yang bisa dilakukan mesin: memeriksa tipe, memformat kode, dan menolak kode yang tidak memenuhi standar.

Setelah episode ini, kalian punya setup yang membuat tim kecil terasa seperti tim besar: kualitas terjaga tanpa menunggu review manusia untuk hal yang bisa dicek mesin.

#Vite Integration dan Preprocessors

#Konfigurasi Vite dan Preprocessor

SvelteKit dibangun di atas Vite, sehingga konfigurasi build dan dev berbagi satu tempat. vitePreprocess memungkinkan TypeScript dan bahasa lain diproses langsung dalam komponen .svelte, dan alias mempersingkat import.

svelte.config.js dengan preprocessor

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import adapter from "@sveltejs/adapter-auto";
 
export default {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        alias: {
            "@/*": "./src/*"
        }
    }
};

#Menjaga Alias dan Tipe Sinkron

Alias di svelte.config.js perlu dicocokkan di tsconfig.json agar TypeScript mengenali $lib dan alias custom. Setelah mengubah konfigurasi, jalankan npx svelte-kit sync agar tipe yang digenerate (seperti ./$types) diperbarui sebelum pemeriksaan tipe.

#TypeScript dan Strict Typing

#Mengaktifkan Mode Strict

Strict typing mengubah banyak "seharusnya bekerja" menjadi "dijamin bekerja". Aktifkan strict di tsconfig.json dan biarkan TypeScript memeriksa seluruh proyek termasuk komponen.

import type { PageLoad } from "./$types";
 
export const load: PageLoad = async ({ params }) => {
    const artikel = await ambilArtikel(params.slug);
 
    return { artikel };
};

#Memanfaatkan Tipe Autogenerated

SvelteKit menghasilkan tipe spesifik per route di ./$types, misalnya PageLoad, Action, dan ServerLoad. Tipe ini memuat bentuk params, locals, dan nilai yang dikembalikan load function, sehingga perubahan kontrak terdeteksi di waktu compile, bukan di produksi.

#CI/CD Pipeline untuk SvelteKit

#Workflow CI Dasar

Pipeline CI menjalankan seluruh pemeriksaan pada setiap push: install dependency, lint, type check, test, dan build. Kegagalan di salah satu langkah menghentikan proses sebelum kode sampai ke produksi.

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: 22
      - run: npm ci
      - run: npm run lint
      - run: npm run check
      - run: npm run test
      - run: npm run build

#Menambahkan Cache dan Artefak

Cache dependency di CI mempercepat install pada push berikutnya, dan artefak build bisa dipakai tahap deployment. Ikuti dokumentasi action yang dipakai; pola npm ci dengan lockfile memastikan dependency yang diinstall persis seperti di lokal.

#Linting, Formatting, dan Pre-commit Hooks

#ESLint dan Prettier di SvelteKit

Template SvelteKit sudah menyertakan ESLint dan Prettier. Aturan lint menjaga pola yang konsisten dan menangkap kesalahan umum, sementara Prettier menyeragamkan format. Jalankan keduanya lewat npm run lint dan npm run format.

npm install -D husky lint-staged
npx husky init

#Otomasi dengan Pre-commit Hooks

Hooks menjalankan pemeriksaan otomatis sebelum commit, sehingga kode yang melanggar standar tidak pernah masuk ke riwayat. lint-staged membatasi pemeriksaan hanya pada file yang berubah, membuat prosesnya cepat meski di repo besar.

npx lint-staged

#Penutup

Inti yang harus dibawa pulang:

• Vite menjadi satu tempat konfigurasi dev dan build; vitePreprocess memproses TypeScript.
• Alias disinkronkan antara svelte.config.js dan tsconfig.json.
• Strict typing memakai tipe autogenerated di ./$types.
• CI menjalankan lint, check, test, dan build pada setiap push.
• Prettier dan ESLint menjaga konsistensi gaya dan pola.
• Husky dan lint-staged otomatis memeriksa file yang akan di-commit.

Di episode 20 selanjutnya kita membahas deployment & hosting: target deployment Vercel, Netlify, Cloudflare, dan self-host, perbandingan serverless dan edge runtime, optimasi build dan deployment aset, serta alur kerja deployment produksi.