Belajar Vue - Tooling Modern & Build Automation

#Pendahuluan

Kualitas aplikasi ditentukan tidak hanya oleh kode, tapi juga oleh perangkat di sekitarnya: bundler yang cepat, bahasa yang ketat, dan pipeline yang otomatis. Tooling yang baik membuat developer fokus pada fitur, bukan pada hal-hal berulang.

Episode 19 membahas tooling modern untuk Vue: Vite sebagai bundler performa tinggi dan Vue CLI sebagai alternatif, integrasi TypeScript dengan strict typing, pipeline CI/CD untuk membangun dan menguji otomatis, serta linting, formatting, dan pre-commit hooks.

#Vite dan Vue CLI

#Scaffold Proyek dengan Vite

Vite adalah bundler bawaan untuk proyek Vue baru, terkenal karena dev server yang instan:

npm create vite@latest my-app -- --template vue-ts

--template vue-ts membuat proyek Vue dengan TypeScript. Vite memanfaatkan native ESM sehingga hot module replacement berjalan hampir tanpa jeda, bahkan untuk proyek besar.

#Build untuk Production

npm run build

npm run build menjalankan kompilasi template Vue, transpile TypeScript, dan bundling dengan optimasi seperti minifikasi dan code splitting. Hasilnya ada di folder dist yang siap dideploy.

#Integrasi TypeScript

#Strict Typing

Aktifkan mode ketat di tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve"
  }
}

strict: true menyalakan semua pemeriksaan tipe ketat: noImplicitAny, strictNullChecks, dan lainnya. Error tipe ditangkap saat develop, bukan di produksi.

#Props Bertipe

Dengan <script setup>, props bisa memakai generic type:

<script setup lang="ts">
interface Produk {
  id: number;
  nama: string;
  harga: number;
}
 
const props = defineProps<{ produk: Produk }>();
</script>

defineProps<{ produk: Produk }> memberi tipe eksplisit untuk props. Editor kini menampilkan error jika parent mengirim data yang salah bentuk.

#CI/CD Pipeline untuk Vue

#Workflow GitHub Actions

Pipeline otomatis membangun dan menguji di setiap push:

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

npm ci menginstal dependensi persis sesuai lockfile, lalu lint, test, dan build dijalankan berurutan. Build yang gagal menghentikan pipeline sebelum kode masuk ke staging.

#Linting, Formatting, dan Pre-commit Hooks

#ESLint dan Prettier

ESLint menangkap kesalahan dan pattern buruk; Prettier menyeragamkan format:

npm install -D eslint prettier lint-staged husky
npx husky init

npx husky init membuat folder .husky tempat hook pre-commit didefinisikan.

#Hook Pre-commit

Jalankan lint hanya pada file yang berubah:

{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

"eslint --fix" dan "prettier --write" memperbaiki file yang akan di-commit secara otomatis. Kode kotor tertahan di git hook, bukan mampir ke code review.

#Penutup

Episode 19 merapikan workshop kalian: Vite untuk dev experience dan build cepat, TypeScript strict untuk jaring keamanan tipe, pipeline CI/CD yang membangun dan menguji otomatis, serta ESLint, Prettier, dan pre-commit hooks yang menjaga kualitas.

Inti yang harus dibawa pulang:

• Vite memberi dev server instan dengan native ESM.
• --template vue-ts memulai proyek dengan TypeScript.
• strict: true mengaktifkan pemeriksaan tipe ketat.
• CI/CD menjalankan lint, test, dan build otomatis.
• Husky menjalankan hook saat pre-commit.
• lint-staged hanya memproses file yang berubah.

Di episode 20 selanjutnya kita membahas deployment dan hosting — men-deploy ke Netlify, Vercel, dan platform lain, hosting SPA dan static site, konfigurasi environment dan build-time variables, serta alur deploy production yang mulus.