Vite nedir ve proje oluşturma

Vite Nedir

Vite, modern web uygulamaları geliştirmek için kullanılan hızlı bir build aracıdır. Vite, Vue.js ekibi tarafından geliştirilmiştir, ancak React, Preact, Svelte ve diğer çerçevelerle de kullanılabilir.

ESModules kullanarak modüllerin yüklenmesini sağlar. Bu, uygulamanın daha hızlı yüklenmesine ve daha az bellek kullanmasına olanak tanır. Ayrıca, Vite, çeşitli dosya türlerini destekler ve önceden yapılandırılmış ayarlarıyla hızlı bir şekilde uygulamalar oluşturmanıza yardımcı olur.

Ben de artık react projeleri oluştururken create-react-app yerine Vite kullanıyorum. Daha hafif ve daha hızlı bir alternatif

Vite projesi nasıl oluşturulur

Öncelikle npm ile vite i çalıştıralım

npm create vite@latest

Bu komutu çalıştırdıktan sonra size create-vite paketini kurmak için sorabilir ona “Yes” diyin, veya bendeki gibi otomatik kurabilir

Ardından ilk önce bize projemizin adını soracak. Projemizin adını girip devam edelim

Proje adını girdikten sonra hangi framework ile çalışmak istediğinizi soracak. Ben React ile devam ediyorum

Önemli Not : Bu aşamada ok tuşları ile framework seçmemiz gerekiyordu ve benim kullandığım Git Bash ile seçemedim. Vite projesi oluşturmaya Powershell ile devam edicem

Bu sefer ok tuşları ile Powershell’de Framework seçebildik. İleriki seçenekte projede TypeScript desteğini seçiyoruz

Bunu da seçtikten sonra projemizin bulunduğu konuma gidip npm install yazabiliriz. Böylelikle gerekli kütüphaneler yüklenecektir.

Aşağıdaki komutları yazarak projeinin oluştuğu konuma gidip kütüphaneleri yükleyip geliştirme sunucusunu çalıştırabilirsiniz.

cd <proje-adınız>
npm install
npm run dev

Vite ile ilgili bilinmesi gerekenler

• Vite kullanmak için Node.js versiyonunuzun 16+ olması tavsiye ediliyor. En sağlıklısı için güncel nodejs LTS versiyonu kullanın.
• React vb projelerinizde Hot Module Replacement desteği veriyor. Yani kodunuzun bir bölümü değiştiğinde state verisini kaybetmeden projeyi yeniliyor.
• Sadece npm değil yarn ve pnpm de kullanarak vite projesi oluşturabilirsiniz.

Vite ile ilgili faydalı linkler ( Sponsorsuz / İngilizce )

Vite’i 100 saniyede anlatan sevdiğim kanala ait bir video : Vite in 100 Seconds
Vite hakkında güzel bir video : Vite Crash Course
Vite resmi websitesi : Vite Next Generation Frontend Tooling