Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

3 Ocak 2023'te yayınlanan Vite v4.0.4, Vite geliştirme ortamının işlevlerini geliştirir ve Vite 3'ten sadece beş ay sonra gelir. Yeni sürüm, JavaScript geliştirme deneyimini eskisinden daha hızlı ve güçlü hale getirecek yeni özellikler ve güncellemelerle birlikte gelir.

Burada Vite'ın ne olduğunu, Vite 4'te bulunan önemli özellikleri ve güncellemeleri tartışacağız.

Ne Vite?

"Vite" kelimesinin kendisi "hızlı" anlamına gelir. Daha hızlı, hafif ve basit bir geliştirme deneyimi sağlamak için tasarlanmış bir ön uç oluşturma aracı ve geliştirme sunucusudur. Geliştirme sırasında kodunuza hizmet eder, dosyalarınızı üretim için paketler ve çeşitli yazılımlarla kolay entegrasyon sağlar. JavaScript çerçeveleri ve kitaplıklarıVue, React, Preact ve Svelte gibi.

Vite son iki yılda çok sayıda iyileştirmeden geçti ve Vite 4 birçok yeni ve geliştirilmiş özellik getiriyor.

1. Toplama 3

Toplama geliştiricilerin farklı paketler oluşturmasına izin veren bir JavaScript modülü paketleyicisidir. JavaScript modülleri tek bir dosyaya. Bu da tarayıcının kodu yüklemek için yapması gereken istek sayısını azaltarak uygulamanın performansını artırır.

Vite artık oluşturma süresi boyunca Toplama 3'ü kullanıyor. Vite sürüm 3, Toplama 2'yi kullandı ancak Ekim 2022'de Toplama 3'ün piyasaya sürülmesinden sonra Vite'ın yeni sürümü, Toplama 3'e büyük bir yükseltme ile geldi.

Toplama 3 çoğunlukla Toplama 2 ile uyumlu olsa da sorunlar oluşabileceğinden, Toplama 3'e yükseltme yapmadan önce Toplama geçiş kılavuzuna bakmalısınız.

2. Speedy Web Compiler (SWC) Kullanan Yeni React Eklentisi

SWC Rust ile yazılmış süper hızlı bir JavaScript derleyicisidir. TSK ve Babil her ikisi de kodunuzu tarayıcılar tarafından desteklenene dönüştüren JavaScript derleyicileridir, ancak SWC Babel'den daha hızlı olduğunu iddia etmiştir.

Vite v3, Babel'i kullandığından, v4, özellikle React projeleri için bir yedek veya alternatif olarak SWC'nin tanıtımıyla birlikte gelir.

Vite, Babel'i desteklemeye devam ederken, Vite 4, React projeleri için farklı ödünleşimlere sahip iki eklenti (vitejs/plugin-react ve vitejs/plugin-react-swc) sunuyor.

vitejs/plugin-react Eklentisi

Bu eklenti, esbuild ve Babel kullanarak minimum paket boyutunu kullanırken hızlı Sıcak Modül Değiştirme sağlar. Ayrıca, Babel dönüşüm ardışık düzenini kullanabilme esnekliğini de sunar.

Sıcak modül değişimi, yağ yenileme sağlar. Geliştiricilerin, tüm sayfayı yenilemek zorunda kalmadan çalışan bir uygulamadaki modülleri güncellemesine olanak tanır. Eklentiyi projenize yüklemek için aşağıdaki gösterimi izleyin.

npm kurulumu @vitejs/plugin-react

Eklentiyi projenize aktarmak için aşağıdaki kodu izleyin;

içe aktarmak { tanımlaYapılandırma } itibaren"davet"
içe aktarmak tepki itibaren"@vitejs/eklenti tepkisi"
ihracatvarsayılan tanımlaYapılandırma({
eklentiler: [tepki()],
})

vitejs/plugin-react-swc Eklentisi

Bu, derleme sırasında esbuild'i ve geliştirme sırasında Speed ​​Web Compiler'ı kullanan yeni bir eklentidir.

Eklenti, Babel'i SWC ile değiştirerek, özellikle standart dışı React uzantıları gerektirmeyen projeler için geliştirme sürecini önemli ölçüde hızlandırmayı hedefliyor.

Eklentiyi nasıl kuracağınız aşağıda açıklanmıştır;

npm ben @vitejs/plugin-react-swc

Projenize aşağıdaki gibi import edin;

içe aktarmak { tanımlaYapılandırma } itibaren"davet";
içe aktarmak tepki itibaren"@vitejs/eklenti-tepki-swc";
ihracatvarsayılan tanımlaYapılandırma({
eklentiler: [tepki()],
});

3. CSS'yi Dizge Olarak İçe Aktarma

Bu özellik, örneğin:

içe aktarmak cssDizesi itibaren'./global.css

Bu davranışı önlemek için Vite 4, ?inline sorgu soneki değiştiricisinin kullanımını tanıtır. İşte sözdiziminin bir gösterimi;

içe aktarmak cssDizesi itibaren'./global.css? Çizgide'

Bu nedenle, v3 CSS varsayılan dışa aktarımı kullanımdan kaldırılmıştır.

4. Ortam Değişkenleri

Vite, dotenv ve dotenv-expand üzerindeki bağımlılıklarını güncelledi. Kullanılan yeni sürümler sırasıyla dotenv 16 ve dotenv-expand 9'dur. Bu güncelleme, düzgün çalışması için "#" veya "`" karakterlerini içeren değerleri tırnak içine almanızı gerektirecektir. İşte bir örnek;

SECRET_HASH="bir şey-ile-A-#-doğramak"

ENV dosyalarını güncelleme sürecini kolaylaştırmak için Vite, dotenv komut satırı arayüzünün kullanılmasını tavsiye etti. Bu, ENV dosyalarının farklı makineler, ortamlar veya ekip üyeleri arasında tutarlı olmasını sağlamaya yardımcı olabilecek isteğe bağlı bir eklentidir. ENV dosyalarını güncelleme sürecini daha az sıkıcı hale getirmeye yardımcı olabilir.

Diğer Yükseltmeler, Düzeltmeler ve Vite v4.0.4'e Geçiş

Vite, daha fazla komut satırı arayüzü kısayolu ekledi. Tüm kısayolların bir listesini görmek için tuşuna basın. H geliştirme sırasında.

Modern tarayıcı yapısı, artık daha geniş ES2020 uyumluluğu için varsayılan olarak safari14'ü hedefliyor. Bağımlılıklar önceden paketlenirken yama paketi desteği vardır, SSR sırasında iyileştirilmiş hata mesajları ve çok daha fazlası vardır.