Automasi linting dan preview bundle adalah kebutuhan penting agar setiap pull request tetap rapi dan build dapat diuji sebelum merge. Dalam konteks runtime Bun, kita bisa memadukan lint-staged, perintah bun lint, bun test, serta alur GitHub Actions untuk menghasilkan linting konsisten, pengujian, dan preview environment.

Persiapan lint-staged dan skrip Bun

Tujuan pertama adalah memastikan file yang di-commit selalu melewati linting dan unit test tanpa perlu menunggu CI. Gunakan lint-staged untuk menjalankan bun lint dan bun test hanya pada file yang berubah.

Contoh package.json minimal:

{
  "scripts": {
    "lint": "bun lint",
    "test": "bun test",
    "prepare": "bun install"
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "bun lint",
      "bun test --filter staged"
    ]
  }
}

Penjelasan: bun lint menjalankan konfigurasi linting (misalnya Bun ESLint atau tools yang kompatibel), sedangkan bun test memvalidasi unit test. lint-staged memanggil keduanya secara selektif sehingga feedback cepat sebelum commit. Pastikan skrip lint/test hanya memproses file yang relevan agar tidak memperlambat pre-commit hook.

Cache dependency Bun untuk mempercepat CI

Build dependencies Bun dapat disimpan di cache GitHub Actions dengan memanfaatkan direktori BUN_INSTALL_CACHE atau default direktori lokal Bun. Tujuannya menekan waktu bun install pada setiap run.

Secara umum:

  • Cache key: gunakan kombinasi lockfile hash (mis. bun.lockb) untuk invalidasi.
  • Path cache: direktori yang digunakan Bun untuk menyimpan paket (mis. ~/.bun atau node_modules/.cache/bun).

Dengan cache, fase dependency tidak diunduh ulang dari awal, sehingga linting dan testing bisa dimulai lebih cepat.

Workflow GitHub Actions lint-test-preview

Workflow utama terdiri dari tiga fase: linting, testing, dan preview bundle. Berikut contoh YAML:

name: CI Bun Bundle

on:
  pull_request:
    branches: ["main"]

jobs:
  lint-test-preview:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: ["bun"]
    steps:
      - uses: actions/checkout@v4

      - name: Cache Bun dependencies
        uses: actions/cache@v4
        with:
          path: ~/.bun
          key: bun-deps-${{ runner.os }}-${{ hashFiles('bun.lockb') }}
          restore-keys: |
            bun-deps-${{ runner.os }}-

      - name: Install dependencies
        run: bun install

      - name: Linting
        run: bun lint

      - name: Run tests
        run: bun test

      - name: Build preview bundle
        run: bun build --outdir=dist

      - name: Deploy preview
        # Bisa ganti dengan action deploy ke environment preview internal
        run: echo "deploy preview to staging"

Workflow ini secara eksplisit memisahkan setiap fase agar log terstruktur. Dengan cache, bun install tidak mengulang unduhan paket setiap run. Fase preview bundle cocok digabung dengan deployment ke environment staging atau service preview internal.

Preview environment dan verifikasi tim

Preview bundle memungkinkan tim melihat hasil perubahan sebelum merge:

  • Hasil build dipublikasikan ke environment sementara (misal server statis atau hosting preview). Jika menggunakan GitHub Pages atau Vercel, gunakan URL preview spesifik.
  • Pastikan workflow memproduksi artifact (misalnya direktori dist) yang dapat diperiksa langsung.
  • Tim developer harus memverifikasi lint/test berhasil lalu mengecek preview manual untuk UI/UX atau integrasi.

Debug tip: jika lint gagal di CI, jalankan bun lint lokal dengan output verbose dan periksa .eslintrc atau konfigurasi linting lainnya. Untuk preview yang gagal, periksa log build bun build serta pastikan asset path cocok.

Kesimpulan

Menggabungkan Bun, lint-staged, dan GitHub Actions menghasilkan pipeline yang otomatis memeriksa kode lalu memproduksi bundle preview. Cache Bun mempercepat instalasi dependency, sedangkan preview environment memberi tim kesempatan memverifikasi hasil secara visual. Dengan workflow seperti ini, tim bisa menjaga kualitas tanpa harus menunggu merge atau melakukan langkah manual setiap kali berubah.