Vite Nedir? Uygulama Geliştirenler İçin Sade Bir Rehber

Vite (“vit” diye okunur, Fransızcada “hızlı” anlamına gelir), web siteleri ve web uygulamaları için bir derleme aracıdır. Geliştirme sırasında değişikliklerinizi tarayıcıda neredeyse anında gösteren bir geliştirme sunucusu çalıştırır. Yayına hazır olduğunuzda kodunuzu, herhangi bir web sunucusunun sunabileceği küçük ve optimize edilmiş dosyalara paketler. Ücretsiz ve açık kaynaklıdır; birçok React, Vue ve Svelte projesinin arkasındaki varsayılan araçtır.

Yapay zekayla geliştirirken Vite neden önemli

Hiç bir Vite komutu yazmayabilirsiniz, ama uygulamanız bir yapay zeka uygulama oluşturucuyla yapıldıysa, muhtemelen onu Vite çalıştırır. Mythex, siz başka bir şey istemedikçe yeni projelere Vite + React + TypeScript + Tailwind ile başlar (teknolojinin nasıl seçildiği).

Vite'in ne yaptığını bilmek şunlarda yardımcı olur:

• Önizlemeyi anlamak. Yapay zeka dosyaları düzenlerken güncellenen canlı önizleme genellikle bir Vite geliştirme sunucusudur.
• Yayını anlamak. Bir Vite uygulaması bir statik dosya klasörüne dönüşür — HTML, JavaScript, CSS ve görseller — ve bu, barındırması ucuz ve basittir.
• Hata mesajlarını okumak. Önizleme kırmızı bir hata katmanı ya da boş bir sayfa gösterdiğinde, çoğu zaman Vite bir dosyanın derlenemediğini bildiriyordur.
• Sınırlarını bilmek. Vite ön yüzü derler. Uygulamanızın bir arka uca ihtiyacı varsa — bir veritabanı, gizli API anahtarları, ödemeler — bu başka bir yerde çalışır. Bkz. ön yüz ve arka yüz.

Günlük bir benzetme

Bir restoran mutfağını düşünün.

• Servis hazırlığı sırasında (geliştirme), şef her yemeği yaparken tadına bakar ve ayarlar. Baharatı değiştirir, bir saniye sonra tekrar tadar. Vite'in geliştirme sunucusu budur: bir dosyayı değiştirirsiniz, sayfa hemen güncellenir; çoğu zaman bir formda yazdıklarınızı bile kaybetmeden.
• Catering siparişi için (üretim), her şey pişirilir, porsiyonlanır, paketlenir ve etiketlenir; böylece taşınabilir ve her yerde servis edilebilir hale gelir. Bu, vite build komutudur: kodunuz herhangi bir sunucu için hazır dosyalara paketlenir, küçültülür ve parmak izi eklenir.

Aynı tarifler, çok farklı iki şekilde işlenir — ve Vite ikisini de yapar.

Vite gerçekte ne yapar

Modern bir web uygulaması birçok dosyadan oluşur: bileşenler, stiller, görseller ve üçüncü taraf kütüphaneler. Tarayıcılar bunların hepsini olduğu gibi kullanamaz. TypeScript JavaScript'e dönüşmelidir, React'in JSX'i dönüştürülmelidir ve Tailwind sınıfları CSS'e çevrilmelidir.

Vite bunu iki modda yönetir:

Eski araçlar, büyük bir uygulamanın başlatılması ve güncellenmesi uzun sürebilsin diye, bir şey göstermeden önce tüm uygulamayı paketlerdi. Vite'in numarası, geliştirme sırasında bunu atlamak ve tarayıcının dosyaları gerektiğinde yüklemesine izin vermektir. Üretimde yine paketleme yapar — Vite 8 itibarıyla Rolldown adlı bir paketleyiciyle — çünkü çok sayıda küçük dosya, birkaç optimize edilmiş dosyadan ziyaretçiler için daha yavaştır.

Çalışılmış bir örnek: bir Vite projesinin içinde ne var

Küçük bir Vite + React uygulamasının kabaca görünümü şöyledir:

my-app/
  index.html          ← uygulamanın başladığı tek HTML sayfası
  package.json        ← kütüphanelerin ve betiklerin (dev, build) listesi
  vite.config.ts      ← Vite ayarları ve eklentiler
  src/
    main.tsx          ← React'i başlatır ve index.html'e bağlar
    App.tsx           ← uygulamanızın en üst düzey bileşeni
    index.css         ← stiller, ör. @import "tailwindcss";
  public/             ← olduğu gibi kopyalanan dosyalar (favicon, robots.txt)

Ve package.json içindeki betikler:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Şimdi tek bir değişikliği takip edelim:

1. “Başlığı mavi yap” diye yapay zekaya istersiniz.
2. Yapay zeka App.tsx içindeki bir sınıfı düzenler.
3. Vite dosyanın değiştiğini fark eder, yalnızca o dosyayı dönüştürür ve güncellemeyi tarayıcıya gönderir.
4. Başlık önizlemede mavi olur; genellikle bir saniye içinde.

Yayınladığınızda vite build, dist/index.html ile birlikte dist/assets/index-a1b2c3.js gibi dosyalar üretir. Rastgele görünen dosya adı kısmı, içerik değiştiğinde değişir; böylece tarayıcılar ve CDN'ler eski kodu sunmadan dosyaları uzun süre önbelleğe alabilir.

Vite'te ortam değişkenleri

Vite, yalnızca adı VITE_ ile başlayan değişkenleri tarayıcı koduna açar; örneğin VITE_PUBLIC_MAP_ID. Bu bir güvenlik önlemidir: tarayıcı kodundaki her şey ziyaretçiler tarafından görülebilir, bu yüzden gizli anahtarların bu önekle başlaması asla olmamalı ve bir arka uçta kalmalıdır. Bkz. ortam değişkenleri ve sırlar.

Temel terimler

Sık yapılan yanlış anlamalar

• “Vite bir çatıdır.” Bir derleme aracıdır. React, Vue ya da Svelte çatıdır; Vite bunları çalıştırır ve paketler.
• “Bir Vite uygulaması bir arka uç içerir.” Standart bir Vite uygulaması yalnızca ön yüzdür. Veritabanları, girişler ve gizli anahtarlar yanında bir sunucu ya da API gerektirir.
• “Geliştirme sunucusunu internete koymak sorun olmaz.” Gerçek trafik için tasarlanmamıştır. Her zaman üretim derlemesinin çıktısını yayınlayın.
• “.env içindeki her şey gizlidir.” Bir Vite uygulamasında VITE_ değişkenleri, her ziyaretçinin indirdiği dosyalara gömülür.
• “Bir sayfayı yenilediğimde 404 veriyor, uygulama bozuk.” Tek sayfalık bir uygulamada barındırma servisi her yolu index.html'e yönlendirmelidir. Bu bir barındırma ayarıdır — bkz. yayından sonra 404 hatalarını düzeltme.

Yapay zeka oluşturucunuzdan ne istemelisiniz

• “Bu uygulama yalnızca Vite ile mi (ön yüz), yoksa bir arka ucu da var mı? Her parça nerede çalışıyor?”
• “Üretim derlemesini çalıştır ve yayınlamadan önce tüm hataları ve uyarıları düzelt.”
• “Hiçbir gizli anahtarın VITE_ değişkenlerinde ya da ön yüz kodunda olmadığını kontrol et.”
• “Önizleme boş bir sayfa gösteriyor — Vite ve tarayıcı konsolundaki hataları kontrol edip nedenini düzelt.” Bkz. boş beyaz sayfa nasıl düzeltilir.
• “Yayından sonra yalnızca ana sayfada değil, her sayfa URL'sinin yenilenmesinin çalıştığından emin ol.”

Mythex'te Vite

Yapay zeka ile Next.js, statik HTML ya da farklı bir arka uç istemediğiniz sürece, her yeni Mythex projesi Vite ile başlar. Özel sandbox'ınızdaki canlı Önizleme, agent dosyaları düzenledikçe güncellenir; Yayınla ise uygulamayı derler ve dağıtır — kendiniz bir barındırma kurmanız gerekmez. Daha sonra bir API ya da veritabanına ihtiyacınız olursa, sohbette isteyin; Mythex Vite ön yüzünün yanında bir arka uç hizmeti ekleyebilir (çoklu hizmetli uygulamalar).

Sorular