Frontend Academy · Ders

Vite: geliştirme sunucusu ve derleme

Bir Vite projesi başlatın, anında HMR geliştirme sunucusunu kullanın, derleme komutunu çalıştırın ve üretim çıktısını önizleyin.

Vite: geliştirme sunucusu ve derleme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Vite Nedir

Vite, Vue'nun yaratıcısı Evan You tarafından oluşturulan yeni nesil bir ön yüz derleme aracıdır. Yerel ESM ve esbuild kullanan son derece hızlı bir geliştirme sunucusunun yanı sıra Rollup destekli bir üretim derlemesi sağlar.

Vite Projesi Oluşturma

npm create vite@latest, yeni bir projenin iskeletini oluşturur. Çerçevenizi (Vanilla, React, Vue, Svelte, Preact, Lit) ve çeşidinizi (JS veya TS) seçiniz. Proje anında hazır olur; yapılandırma gerekmez.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Geliştirme Sunucusu — Anında Başlangıç

Vite, geliştirme sırasında paketleme yapmaz. Her dosyayı yerel bir ESM modülü olarak sunar. Tarayıcı bunları doğrudan içe aktarır. Paketleme yapılmadığı için projenin boyutundan bağımsız olarak soğuk başlangıç 100 ms'nin altındadır. HMR sırasında yalnızca değiştirilen dosyalar yeniden derlenir.

HMR — Sıcak Modül Değiştirme

Vite'ın HMR özelliği, tam sayfa yenilemesi yapmadan çalışan uygulamadaki yalnızca değişen modülü değiştirir. @vitejs/plugin-react ile React kullanılırken bileşen durumu HMR sırasında korunur. Değişiklikler 50 ms'den kısa sürede görünür.

vite.config.js / vite.config.ts

Vite, vite.config.ts dosyasıyla yapılandırılır. Yaygın seçenekler şunlardır: eklentiler, çözümleme diğer adları, sunucu bağlantı noktası, API çağrıları için vekil sunucu ve derleme çıktı dizini.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Ortam Değişkenleri

Vite, VITE_ ön ekiyle başlayan ortam değişkenlerini import.meta.env aracılığıyla sunar. Bunları .env, .env.development ve .env.production dosyalarında saklayınız. Gizli bilgilerin önüne hiçbir zaman VITE_ eklemeyiniz; bu bilgiler tarayıcı paketine dahil edilir.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — Üretim Derlemesi

npm run build, uygulamayı paketlemek, küçültmek ve kullanılmayan kodları ayıklamak için arka planda Rollup'ı çağırır. Çıktı, dağıtıma hazır şekilde dist/ klasörüne yazılır.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Paketi Analiz Etme

Paket içeriğinin ağaç haritasını oluşturmak için vite-bundle-visualizer veya rollup-plugin-visualizer kullanınız. Bu araçlar, aşırı büyük bağımlılıkları ve tembel yükleme fırsatlarını belirlemenize yardımcı olur.

npm run preview

npm run preview, üretim dist/ derlemesini yerel olarak sunar. Dağıtıma geçmeden önce üretim derlemesini doğrulamak için kullanınız; uygulama geliştirme modunda değilken ortaya çıkan sorunları yakalar.

Vite'ta Kod Bölme

Dinamik import() ifadeleri otomatik olarak ayrı parçalar oluşturur. React Router'ın tembel rotaları ve Vue'nun defineAsyncComponent işlevi de bölmeyi tetikler. Parça boyutlarını derleme çıktısında kontrol ediniz.

Kitaplıklar için Vite

Vite'ın kitaplık modu (build.lib), npm kitaplıklarını oluşturur ve hem ESM hem de CJS biçimlerinde çıktı üretir. React gibi eş bağımlılıkların paketlenmesini önlemek için harici bağımlılık listesini belirtiniz.

Kısa Kontrol

Vite'ın geliştirme sunucusu webpack'in geliştirme sunucusundan neden daha hızlıdır?

Özet: Vite

npm create vite@latest anında proje iskeleti oluşturur. Geliştirme sunucusu yerel ESM kullanır; paketleme yapılmaz ve HMR anında gerçekleşir. Eklentiler, diğer adlar ve vekil sunucu için vite.config.ts kullanılır. Tarayıcıda güvenle kullanılabilecek ortam değişkenleri için VITE_ ön eki kullanılır. npm run build, optimize edilmiş bir Rollup paketi üretir. npm run preview, üretim derlemesini yerel olarak sınar.

Sıkça Sorulan Sorular

“Vite: geliştirme sunucusu ve derleme” dersi ücretsiz mi?

Evet — “Vite: geliştirme sunucusu ve derleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Vite: geliştirme sunucusu ve derleme” dersinde ne öğreneceğim?

Bir Vite projesi başlatın, anında HMR geliştirme sunucusunu kullanın, derleme komutunu çalıştırın ve üretim çıktısını önizleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Vite: geliştirme sunucusu ve derleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

ES Modülleri: import export ve dinamik import
npm ve package.json: bağımlılıklar betikler
Vite: geliştirme sunucusu ve derleme
Paketleme Kavramları: ağaç sarsma kod bölme

← Frontend Academy Sayfasına Dön