Vite.js Nedir?
Vite.js, modern web geliştirme için geliştirilmiş bir build aracı ve bundler. 2019 yılında Evan You, Vue.js’in yaratıcısı tarafından geliştirilmiş olsa da, Vite sadece Vue.js projelerinde değil, aynı zamanda React, Svelte, Preact gibi birçok popüler framework ile de mükemmel çalışıyor. Vite.js’in sunduğu hızlı geliştirme deneyimi sayesinde, projelerimizi çok daha verimli bir şekilde geliştirebiliriz.
Vite.js ile Yeni Bir Frontend Projesi Başlatma
Dilerseniz şimdi Vite.js ile bir frontend projesi nasıl başlatılır, adım adım inceleyelim.
Vite.js'i kullanabilmek için bilgisayarınızda Node.js yüklü olmalı. Eğer henüz yüklemediyseniz, [Node.js’in resmi web sitesine](https://nodejs.org/) gidip, uygun sürümü indirip kurabilirsiniz.
Node.js’i yüklediğinizde, aynı zamanda npm (Node Package Manager) de yüklenmiş olur. Bu araç, paketleri yüklememize ve projelerimizle ilgili bağımlılıkları yönetmemize olanak tanır.
# 2. Yeni Bir Proje Dizini Oluşturmak
İlk adım olarak, yeni bir dizin oluşturmanız gerekir. Terminal veya komut satırında şu komutu kullanarak bir dizin oluşturun:
mkdir vite-proje
cd vite-proje
```
Bu adımda, "vite-proje" dizininde yeni bir proje başlatacağız.
# 3. Vite Projesini Başlatmak
Vite.js’in projenizi kurmak için çok basit bir komut kullanabilirsiniz. Şimdi terminal veya komut satırında şu komutu çalıştırın:
npm create vite@latest
```
Bu komut, size yeni bir proje başlatmak için bazı seçenekler sunacaktır. Projenizin ismini belirledikten sonra, hangi framework’ü kullanmak istediğinizi seçmeniz istenecek (örneğin, React, Vue veya Svelte). Burada React seçtiğinizi varsayalım.
# 4. Bağımlılıkları Yüklemek
Projeniz oluşturulduktan sonra, gerekli bağımlılıkları yüklemek için şu komutu kullanın:
npm install
```
Bu komut, projenizin ihtiyacı olan tüm paketleri ve modülleri yükleyecektir.
# 5. Geliştirme Sunucusunu Çalıştırmak
Vite.js, geliştirme sırasında hızlı yeniden yüklemeler sağlar. Projenizin gelişimine başlamak için geliştirme sunucusunu şu komutla başlatabilirsiniz:
npm run dev
```
Bundan sonra, http://localhost:5173 adresinden projenizi görüntüleyebilirsiniz. Vite, yalnızca değişiklik yaptığınız dosyaları yeniden yükler, bu sayede geliştirme süreci inanılmaz derecede hızlı hale gelir.
# 6. Proje Dosyalarını Keşfetmek
Vite projenizde bir takım varsayılan dosyalar olacaktır. Bu dosyalar şunlardır:
- src/main.js: JavaScript kodlarınızın bulunduğu dosya.
- public: Statik dosyalarınızı buraya koyabilirsiniz.
Artık bu dosyalarda değişiklikler yaparak projenizi şekillendirmeye başlayabilirsiniz.
Vite.js ile Proje Yapısının Avantajları
Vite.js ile frontend projeleri geliştirmenin pek çok avantajı var:
- Hızlı Yeniden Yükleme: Değişiklik yaptığınızda, sadece değiştirdiğiniz kısımlar yeniden yüklenir. Bu, geliştirme sürecini hızlandırır.
- Modern Özellikler: Vite, ES module destekler ve modern tarayıcılar için optimize edilmiştir. Bu sayede projenizin daha hızlı ve verimli çalışmasını sağlarsınız.
- Kolay Yapılandırma: Vite’nin yapılandırması, geleneksel bundler araçlarına kıyasla oldukça basittir. Minimal yapılandırma ile hızlıca projeye başlayabilirsiniz.
