TWD Vite Eklentileriyle Geliştirme Deneyimini Kolaylaştırın

Geliştirme araçları, modern web projelerinin olmazsa olmazlarından biri haline geldi. Ancak bu araçların uygulama koduna doğrudan müdahale etmesi, projelerin temizliğini ve bakımını zorlaştırabiliyor. TWD adı verilen test çalıştırma aracı da bu soruna yeni bir çözüm getiriyor. twd-js@1.8 ve twd-relay@1.2 sürümleriyle birlikte, artık Vite projelerinde sadece iki eklentiyle çalışabiliyor ve uygulama giriş dosyanızda hiçbir değişiklik yapmanıza gerek kalmıyor.

Geliştirme Ortamı Kurulumunun Basitleştirilmesi

Eski yöntemde, TWD'yi uygulamaya dahil etmek için main.tsx veya benzeri giriş dosyanıza oldukça karmaşık bir kod bloğu eklemeniz gerekiyordu. Bu blok, dinamik ithalatlardan test globlarına, hizmet çalışanı yapılandırmasından ağ istemcisi oluşturulmasına kadar birçok sorumluluğu üstleniyordu. Örneğin, geliştirme modunda çalışan bir blok aşağıdaki gibi görünüyordu:

if (import.meta.env.DEV) {
  const { initTWD } = await import("twd-js/bundled");
  const tests = import.meta.glob("./**/*.twd.test.ts");
  initTWD(tests, {
    open: false,
    position: "right",
    serviceWorker: true,
    serviceWorkerUrl: "/mock-sw.js",
    search: true,
  });
  const { createBrowserClient } = await import("twd-relay/browser");
  const client = createBrowserClient({
    url: `${window.location.origin}/__twd/ws`,
  });
  client.connect();
}

Bu yaklaşım işlevsel olsa da, uygulama kodunun içinde yer alması gereken bir araçtan kaynaklanıyordu. Artık ise bu karmaşıklık, vite.config.ts dosyasındaki sadece iki eklentiyle çözülebiliyor:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { twd } from "twd-js/vite-plugin";
import { twdRemote } from "twd-relay/vite";

export default defineConfig({
  plugins: [
    react(),
    twd({
      testFilePattern: "/**/*.twd.test.ts",
      open: false,
      position: "right",
      search: true,
    }),
    twdRemote(),
  ],
});

Bu yapılandırmada, twd() eklentisi yan çubuğu, test glob keşfini ve hizmet çalışanı kaydını yönetirken, twdRemote() eklentisi Vite geliştirme sunucusuna bağlanır ve tarayıcı istemcisini otomatik olarak index.html dosyasına enjekte eder. Her iki eklenti de sadece geliştirme (serve) aşamasında çalıştığı için, üretim derlemeleri hiçbir şekilde etkilenmiyor.

Neden Bu Değişiklik Önemli?

Bu yenilik, geliştirme araçlarının yönetimini tamamen değiştiriyor. İşte bu değişikliğin en önemli avantajları:

• Tek bir kaynakta doğruluk: Eski sistemde serviceWorkerUrl, hizmet çalışanı URL'si, WebSocket yolu ve tarayıcı istemcisinin bağlantı yaptığı yol gibi birçok yapılandırma farklı dosyalarda yer alıyordu ve bu değerlerin birbiriyle uyumlu olması gerekiyordu. Artık ise tüm bu ayarlar, eklentiler tarafından yönetiliyor ve tutarlılık otomatik olarak sağlanıyor.

• Uygulama kodunda bekleme sorunu ortadan kalkıyor: Eski yöntemde, React'ın bile yüklenmediği aşamada await import("twd-js/bundled") kullanılıyordu. Bu, uygulamayı başlatmadan önce gereksiz bir bekleme süresi oluşturuyordu. Artık ise bu bekleme süresi tamamen ortadan kalktı.

• Araçlar artık araç konfigürasyonunda yer alıyor: Yeni geliştiriciler, main.tsx dosyasını okurken geliştirme moduna özel kodları filtrelemek zorunda kalmıyor. Bu sayede, uygulamanın başlangıç süreci daha temiz ve anlaşılır hale geliyor. Bu yaklaşım, Vite ekosistemindeki diğer popüler eklentilerle (örneğin @vitejs/plugin-react, Tailwind, Tanstack Router geliştirme araçları) de uyumlu hale geliyor.

Vite Dışı Projeler için Alternatifler

TWD'nin Vite desteği dışındaki projelerde (örneğin Webpack, Angular CLI, Rollup, esbuild, Rspack) kullanılmaya devam edilmesi gerekiyorsa, eski yöntem geçerliliğini koruyor. Bu projelerde initTWD ve createBrowserClient fonksiyonları halen kullanılabilir durumda. Ayrıca, Vite projelerinde elle bağlantı kurmak isteyenler için de twdRemote({ autoConnect: false }) seçeneği sunuluyor.

Hemen Başlayın

TWD'nin yeni versiyonunu denemek için twd.dev adresini ziyaret edebilirsiniz. Uygulamanızda twd-js@1.8 ve twd-relay@1.2 sürümlerine yükseltme yaptıktan sonra, main.tsx dosyasındaki geliştirme moduna özel kodu kaldırıp, vite.config.ts dosyasına sadece iki eklenti eklemeniz yeterli olacaktır. Bu basit adımlarla, geliştirme deneyiminizi önemli ölçüde iyileştirebilirsiniz.

Geliştirme araçlarının karmaşıklığını azaltmak, projelerin temizliğini ve bakımını kolaylaştırıyor. TWD'nin bu yenilikçi yaklaşımı, geliştiricilere daha verimli ve odaklanmış bir çalışma ortamı sunmayı hedefliyor. Gelecekteki versiyonlarda benzer iyileştirmelerin devam etmesi bekleniyor.