Bun ile React Projesi Geliştirmek: Kurulumdan Testlere ve Production Build Sürecine
React ekosisteminde proje geliştirmek için genellikle Node.js, npm veya başka bir paket yöneticisi ve Vite gibi araçlar kullanılır. Ancak Bun, bu iş akışının önemli bir bölümünü tek bir araç altında toplamayı hedefliyor.Bu yazıda Bun'ın ne olduğunu, React ve Vite ile nasıl kullanılabileceğini, dahili test runner özelliğini, GitHub Actions entegrasyonunu ve production build sürecini inceleyeceğiz.
1. Bun nedir?
Bun, JavaScript ve TypeScript projeleri için geliştirilmiş bir çalışma zamanı ve araç setidir.Başlıca özellikleri şunlardır:
- JavaScript ve TypeScript kodlarını çalıştırma
- Paket yükleme ve bağımlılık yönetimi
- Dahili test runner
- JavaScript ve TypeScript için bundler
- Geliştirme komutlarını tek bir CLI üzerinden yönetme
2. Bun kurulumu ve kontrolü
Bun'ın resmi kurulum yönergelerini kullanarak işletim sisteminize uygun kurulumu gerçekleştirebilirsiniz:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kurulum tamamlandıktan sonra terminalde şu komutları çalıştırın:
bun --version
bun --help
Sürüm numarası görüntüleniyorsa kurulum başarılıdır.
3. Vite ile React projesi oluşturmak
Vite, React uygulamalarında hızlı geliştirme sunucusu ve production build işlemleri için yaygın olarak kullanılan bir araçtır.Bun ile yeni bir React + TypeScript projesi oluşturmak için:
bun create vite react-bun-app --template react-ts
cd react-bun-app
bun install
bun run dev
Terminalde gösterilen yerel adresi tarayıcıda açarak uygulamayı görüntüleyebilirsiniz.
Burada görev dağılımı önemlidir:
- Bun: Paketleri yükler ve komutları çalıştırır.
- Vite: Geliştirme sunucusunu ve production build sürecini yönetir.
- React: Kullanıcı arayüzünü oluşturur.
- TypeScript: Geliştirme sırasında tip denetimi sağlar.
4. Proje komutlarını incelemek
Vite tarafından oluşturulan package.json dosyasında genellikle şu komutlar bulunur:{
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
}
}
Komutları Bun ile şu şekilde çalıştırabilirsiniz:
bun run dev
bun run build
bun run lint
bun run preview
Özellikle build komutunun TypeScript kontrolünü ve Vite build işlemini birlikte yürütmesi yararlıdır.
Ancak TypeScript ayarları projeye göre değişebilir. tsc -b kullanımı, oluşturulan Vite şablonunun yapılandırmasına bağlıdır.
5. Bun'ın dahili test runner özelliği
Bun'ın öne çıkan özelliklerinden biri, ayrı bir test runner kurmadan test yazıp çalıştırabilmesidir.Örneğin src/utils.ts dosyasında aşağıdaki fonksiyonu tanımlayalım:
export function add(a: number, b: number): number {
return a + b;
}
Ardından src/utils.test.ts dosyasını oluşturalım:
import { expect, test, describe } from "bun:test";
import { add } from "./utils";
describe("add fonksiyonu", () => {
test("iki sayıyı toplar", () => {
expect(add(2, 3)).toBe(5);
});
test("negatif sayılarla çalışır", () => {
expect(add(-2, -3)).toBe(-5);
});
});
Testleri çalıştırmak için:
bun test
Bun test runner, testleri çalıştırır ve başarılı ya da başarısız sonuçları terminalde gösterir.
Mevcut projelerde Jest veya Vitest kullanılıyorsa geçiş yapmadan önce kullanılan test API'leri, mock mekanizmaları ve eklentiler değerlendirilmelidir.
6. GitHub Actions ile otomatik test
Bir yazılım projesinde testlerin yalnızca geliştiricinin bilgisayarında çalıştırılması yeterli değildir. Kod GitHub'a gönderildiğinde testlerin otomatik olarak çalıştırılması hataların erken tespit edilmesini sağlar.Proje içerisinde .github/workflows/test.yml dosyasını oluşturalım:
name: Bun Tests
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Repository'yi indir
uses: actions/checkout@v4
- name: Bun kur
uses: oven-sh/setup-bun@v2
with:
bun-version: latest
- name: Bağımlılıkları yükle
run: bun install --frozen-lockfile
- name: Testleri çalıştır
run: bun test
- name: Production build
run: bun run build
Bu iş akışı, main dalına yapılan push işlemlerinde ve bu dala açılan pull request'lerde çalışır.
--frozen-lockfile seçeneği, CI ortamında lockfile ile bağımlılık tanımları arasındaki tutarlılığın korunmasına yardımcı olur.
Gerçek projelerde latest yerine belirli bir Bun sürümünü sabitlemek daha tekrarlanabilir build sonuçları sağlayabilir.
7. Production build hazırlamak
Geliştirme sunucusu ile production ortamı aynı şey değildir. Geliştirme sırasında kullanılan bun run dev komutu, uygulamayı canlı ortamda yayınlamak için tek başına yeterli değildir.Vite tabanlı bir React uygulamasını derlemek için:
bun run build
Başarılı bir build işleminden sonra genellikle dist/ klasörü oluşur.
Üretilen dosyalar bir statik dosya sunucusunda veya uygun bir hosting hizmetinde yayınlanabilir.
Build sonucunu yerel ortamda kontrol etmek için:
bun run preview
Bu komut, oluşturulan çıktıyı yerel olarak incelemeyi sağlar. Production sunucusunun yerini tutmaz.
Eğer uygulama sunucu tarafında render ediliyorsa veya backend gerektiriyorsa deployment mimarisi buna göre ayrıca tasarlanmalıdır.
8. Bun kullanmanın avantajları ve sınırlamaları
Avantajları- Paket yükleme ve test komutlarını tek araçla yönetebilmek
- Dahili test runner sayesinde daha az ek araçla başlayabilmek
- Vite ve React projelerinde mevcut geliştirme alışkanlıklarının büyük kısmını koruyabilmek
- CI süreçlerinde Bun komutlarını doğrudan çalıştırabilmek
- Hız kazanımı projeye ve iş yüküne göre değişir.
- Her Node.js bağımlılığının Bun ile uyumlu olduğu varsayılmamalıdır.
- Production build sürecinin hangi araca ait olduğu açıkça belirlenmelidir.
- Kilit dosyaları ekip içerisinde tutarlı biçimde kullanılmalıdır.
- Testlerin geçmesi, ayrıca gereken TypeScript kontrollerinin atlanabileceği anlamına gelmez.
Sonuç
Bun, React geliştiricilerine paket yönetimi, test ve JavaScript çalıştırma işlemlerini tek bir araçla yürütme olanağı sunar. Vite ile birlikte kullanıldığında mevcut React geliştirme akışını koruyarak farklı bir araç zinciri tercih etmek mümkündür.Özellikle yeni projelerde Bun'ın avantajlarını değerlendirmek kolaydır. Büyük ve mevcut projelerde ise geçiş kararı verilmeden önce bağımlılık uyumluluğu, CI sonuçları ve gerçek build süreleri ölçülmelidir.
Son düzenleme: