Vite ile Svelte projesi oluşturma

Bu yazıda Vite aracını kullanarak bir Svelte projesi nasıl oluşturulur bunu inceledim.

Öncelikle, 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 ReactPreactSvelte ve diğer kütüphaneler ile de kullanılabilir.

Vite, bizim için projeyi başlatır ve gerekli kütüphaneleri indirir, yerel geliştirme sunucusu çalıştırır ve son olarak build etmemize olanak sağlar.

Daha fazla bilgi için Vite Nedir ? Yazımı okuyabilirsiniz.

Svelte nedir ?

Svelte gittikçe popülerliği ve beğenisi artan bir Javascript framework’üdür

Svelte, React’ten farklı olarak sanal DOM kullanmaz ve direkt reaktif yapıda bir framework’tür. React gibi state’e ihtiyaç duymaz doğrudan değişken değerlerini değiştirebilir ve DOM’da görebilirsiniz.

Svelte projelerinin dosya boyutu diğer JS frameworklerine göre daha küçüktür.

Projeyi oluşturma

Öncelikle Vite kullanacağımız için bilgisayarınızda Node.js kurulu olması lazım. Buradan indirebilirsiniz yoksa.

Ardından terminali açarak aşağıdaki Vite komutunu çalıştırıyoruz. Terminalde projeyi kurmak istediğiniz klasörde olmanız iyi olur

npm create vite@latest

Ardından size proje ismini soracak, bu aynı zamanda projenin klasörünün ismi. İsmi yazıp enter.

bash terminal

Proje adından sonraki sorusu hangi framework kullanacağınız. Svelte diyorum.

vite terminal

Sonraki adımda TS, JS ve Svelte’in server side rendering aracı olan SvelteKit arasında seçim yapmanızı istiyor. JS ile devam ediyorum ben

vite svelte terminal

İlk kurulumu tamamladık. Şimdi projenin bulunduğu klasöre cd <proje_adı> ile gidip npm install yaparak gerekli kütüphaneleri kurmak lazım.

vite svelte

Projeye ilk bakış

Projenin gerekli kütüphanelerini kurduktan sonra VSCode ile projeyi açıp inceleyebiliriz.

vite projesi svelte

İlk olarak projenin dosyalarını inceleyelim.

.vscode klasörü vscode için eklenti takibi yaptığı vscode’a özel bir klasör
node_modules klasöründe gerekli kütüphaneler var
public klasörü görsel gibi değişmeyen sabit kaynakların olduğu klasör
src klasörü kodları yazdığımız ve en çok ilgilendiğimiz klasör
diğer dosyalar genellikle doğrudan değiştirmediğimiz ayar ve kütüphane takip dosyaları

App.svelte dosyası

App.svelte dosyası projenin ilk çalıştırdığı dosya. Svelte eklentisine sahip. Bu dosyada Svelte’e uygun olarak kod yazıyoruz.

app.svelte dosyası

Geliştirme sunucusunu çalıştırma

Projeyi geliştirirken yardımcı olması için geliştirici sunucusunu kullanırız. Bunun için aşağıdaki komutu terminale yazmanız lazım.

npm run dev

Komutu yazdıktan sonra Vite size geliştirici sunucusunun adresini verecektir.

npm run dev

Bu adresi tarayıcınızda açarsanız aşağıdaki başlangıç sayfasını görebilirsiniz

vite + svelte

Projeyi build etme

Projenizi bitirdikten sonra build etmek için aşağıdaki komutu terminalden çalıştırabilirsiniz.

npm run build

Ardından dist klasöründe Svelte size projenin son halini oluşturur.

npm run build

Ek kaynaklar

Bu yazıda Svelte nasıl kullanılır çok değinmedim, ondan ziyade Vite ile bir Svelte projesi oluşturma adımlarını gösterdim.

Svelte öğrenmek isterseniz aşağıdaki kaynaklara bakabilirsiniz.

Svelte nedir? Kaynak : Onur Dayıbaşı
Svelte nedir? Kaynak : Karabay Yazılım
Svelte resmi sayfası öğretici

Svelte Dersleri – Prototürk

ufak not : kaynaklar sponsorlu değildir.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top