Bun ile React Projesi Geliştirmek

Konu İçeriği — Hızlı Bakış ( cPanel / Web • ⏱ ~5 dk okuma • Kod: JavaScript)
01. Bun ile React Projesi Geliştirmek: Kurulumdan Testlere ve Production Build Sürecine
02. 1. Bun nedir?
03. 2. Bun kurulumu ve kontrolü
04. 3. Vite ile React projesi oluşturmak
05. 4. Proje komutlarını incelemek
06. 5. Bun'ın dahili test runner özelliği

Genişletmek için tıkla ...

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

Bun, Node.js ekosistemindeki pek çok araçla uyumlu olacak şekilde tasarlanmıştır. Bununla birlikte, her Node.js paketi veya her geliştirme aracıyla kusursuz uyumluluk varsayılmamalıdır.

2. Bun kurulumu ve kontrolü

Bun'ın resmi kurulum yönergelerini kullanarak işletim sisteminize uygun kurulumu gerçekleştirebilirsiniz.

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.

Bun kullanmak, Vite'ı ortadan kaldırmak anlamına gelmez. İki araç birlikte kullanılabilir.

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

Dikkat edilmesi gerekenler

• 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.

JavaScript ile Hata Yutmayan Retry Kalıbı

Sıkça Sorulan Sorular (SSS)