ASP.NET Core MVC projenize modern frontend araçları entegre etmek istediğinizde, Vite.js mükemmel bir tercih olabilir. Bu yazıda, ASP.NET Core MVC projenize Vite'ı entegre etmenin adımlarını ve avantajlarını inceleyeceğiz.
Vite Nedir ve Neden Kullanmalıyız?
Webpack gibi alternatiflere göre çok daha hızlıdır ve geliştirme deneyimini önemli ölçüde iyileştirir.
Avantajları:
-
Çok hızlı geliştirme sunucusu ve Hot Module Replacement (HMR)
-
Native ES modülleri kullanarak anında yükleme ve güncelleme
-
Üstün SCSS/SASS desteği ve otomatik CSS modül desteği
-
Minimal yapılandırma gereksinimi
-
Üretim için optimize edilmiş build çıktıları
Proje Yapısı
ASP.NET Core MVC projenizin nasıl organize edileceğini anlamak önemli. İşte örnek proje yapımız:
Adım 1: Gerekli Paketleri Kurun
İlk adım, projenize NPM paketlerini eklemektir. Aşağıdaki komutları çalıştırın:
Adım 2: Vite Yapılandırmasını Oluşturun
Projenizin kök dizininde vite.config.js dosyasını oluşturun:
Adım 3: Frontend Kaynak Dosyalarını Oluşturun
Ana JavaScript Dosyası (src/main.js)
SCSS Değişkenleri (src/scss/variables.scss)
Ana SCSS Dosyası (src/scss/site.scss)
Adım 4: ASP.NET Core MVC Entegrasyonu
_Layout.cshtml Dosyasını Güncelleme
ASP.NET Core MVC projenizin Layout dosyasını Vite ile entegre etmek için güncellemeniz gerekiyor:
_ViteImports.cshtml Partial Oluşturma
Production ortamında Vite ile oluşturulan dosyaları yüklemek için bir partial view oluşturun:
Adım 5: NPM Script'lerini Yapılandırma
package.json dosyanıza aşağıdaki script'leri ekleyin:
Adım 6: Farklı Ortamlarda Çalıştırma
Properties/launchSettings.json dosyanızda, uygulamanızı farklı ortamlarda çalıştırmak için profiller ekleyin:
