Vite'a Başlarken: Nihai Derleme Aracı

Web uygulamaları özellik açısından daha zengin hale geldikçe, hızlı ve verimli oluşturma araçlarına olan ihtiyaç da artmaya devam ediyor.

Vite, yıldırım hızında bir geliştirme sunucusu ve optimize edilmiş bir oluşturma süreci sağlayan, kullanıcıların iş akışlarını kolaylaştırmasına ve son kullanıcı deneyimini iyileştirmesine olanak tanıyan modern bir oluşturma aracıdır.

Kurulum sürecini, temel özelliklerini ve Komut Satırı Arayüzü (CLI) komutlarını kapsayan Vite ile nasıl başlayacağınızı keşfedeceksiniz.

Bir Vite Projesi Başlatın

kullanmadan önce Viteyüklemeniz gerekir Sisteminizde Node.js ve Node Paket Yöneticisi. Bu iki paketi kurduktan sonra Vite ile proje oluşturmaya devam edebilirsiniz.

Npm kullanarak Vite ile bir projeyi şu şekilde başlatabilirsiniz:

npm başlatma daveti

Bu komutu çalıştırdığınızda, geçerli çalışma dizininizde yeni bir Vite projesi oluşturur. Komut, yeni Vite projenizi kurmak için temel yapılandırma seçimlerini yapmanızı ister.

Komutun sizden seçmenizi istediği seçeneklerin dökümü aşağıda verilmiştir:

1. Projenin Adı. Komutu çalıştırdığınızda, yeni projeniz için bir ad vermenizi ister. Verdiğiniz ad ayrıca paket.json dosya ve proje dizininizin adı olarak hizmet eder.
2. Bir Çerçeve seçin. Bu istem, projeniz için bir çerçeve seçmenizi isteyecektir. Vite şu anda React, Vue, Angular gibi popüler ön uç çerçeveleri ve düz JavaScript kodu için bir Vanilla seçeneğini desteklemektedir.
3. Bir Varyant seçin. Bu, projeniz için JavaScript gibi alternatifleri kapsayan bir değişken seçmenizi ister ve altküme dili TypeScript.

Siz gerekli bilgileri sağladıktan sonra, Vite mevcut çalışma dizininizde yeni bir proje yapısı oluşturacaktır. Yapı, aşağıdakileri içeren temel bir proje kurulumunu temsil edecektir: paket.json Dosya kaynak olan dizin index.html Ve ana.js dosya ve bir halk dizin.

Proje yapısını oluşturduktan sonra, çalıştırarak proje dizinine gidebilirsiniz. CD . Bunu yaptıktan sonra, projenizin ihtiyaç duyabileceği tüm ek bağımlılıkları kurun. npm kurulum emretmek.

Bir geliştirme sunucusu başlatmak ve projenizde yapılan değişiklikleri izlemek için, npm geliştiriciyi çalıştır proje terminalinizdeki komut.

Vite'ın Özellikleri

Vite'ın özellikleri, oluşturma sürecini kolaylaştırmaya ve web oluşturma deneyimini geliştirmeye odaklanır.

Hızlı Geliştirme Sunucusu

Vite'ın geliştirme sunucusu, inanılmaz hız sağlayan yerel ES modüllerini ve yavaş modül yüklemeyi kullanır. Bu, hızlı geri besleme döngülerine ve yıldırım hızında başlatma sürelerine olanak tanır.

Optimize Edilmiş Oluşturma Süreci

Vite, üretime hazır, optimize edilmiş ve küçültülmüş kod üretmek için oluşturma prosedürünü geliştirdi. Ek olarak, baskın ve sürüm varlıklarını önbelleğe alabilen bir bildirim dosyası oluşturur.

Çeşitli Ön Uç Çerçeveleri için Destek

Vite, Vue dahil olmak üzere çeşitli ön uç çerçevelerini destekler ve React Js ve Angular Js gibi benzer çerçeveler. Bu, geliştiricilerin tercih ettikleri çerçeveyi seçmelerine ve Vite'ın güçlü yeteneklerinden yararlanmalarına olanak tanır.

Sıcak Modül Değişimi (HMR)

Vite'ın Çalışırken Modül Değiştirme (HMR) özelliği, tam sayfa yenileme gerektirmeden uygulamada hızlı ve sorunsuz güncellemeler yapılmasını sağlar. Bu, geliştirme sürecini daha hızlı ve daha verimli hale getirir.

CSS Ön İşleme ve PostCSS Entegrasyonu

Vite, Sass, Less ve Stylus dahil olmak üzere CSS ön işlemeyi destekler. Ayrıca, PostCSS ile bütünleşerek CSS'de ek dönüşümler ve optimizasyonlara izin verir.

Vite, TypeScript, JSX ve WebAssembly desteği dahil olmak üzere birçok başka özellikle birlikte gelir. Vite v4.0.4'ün piyasaya sürülmesiyle, Vite'ın geliştirici topluluğu büyüdü ve düzenli olarak yeni özellikler ekleyerek yazılımın bakımını aktif olarak yapıyor.

Vite'ın Komut Satırı Arayüzü (CLI)

Vite'ın Komut Satırı Arayüzü (CLI), Vite'ın davranışını özelleştirmek için kullanışlı bir araçtır. Geliştirme sürecini kolaylaştırmaya da yardımcı olan bir dizi temel komut sağlar. Önemli CLI komutlarından bazıları şunlardır:

inşa etmek

Bu komut, uygulamayı bir üretim ortamı için oluşturacak, kodu dağıtmaya hazır olacak şekilde optimize edecek ve küçültecektir. Bu komutu kullanarak, uygulamanızın olabildiğince hızlı ve etkili olmasını ve kullanıcılarınıza dağıtıma hazır olmasını sağlayabilirsiniz.

ön izleme

Bu komut, oluşturulan kodu üretime dağıtmadan önce önizlemenizi sağlar. Her şeyin beklendiği gibi göründüğünden ve çalıştığından ve dikkat edilmesi gereken belirgin sorunlar veya problemler olmadığından emin olmak istiyorsanız, bu çalıştırılması yararlı bir komuttur.

optimize et

optimize et proje kodunu analiz eden ve ağaç gerçekleştirerek optimize edilmiş üretim yapıları oluşturan Vite 2.6 ve sonraki sürümlerde mevcuttur. yüklemek için gereken istekleri azaltmak için sallama, kod bölme işlemleri ve küçük varlıkları doğrudan son yapıya yerleştirme uygulama.

optimize et sırasında otomatik olarak yürütülür. inşa etmek Optimize edilmiş üretim yapıları oluşturan komut. Yapı boyutunu ve performansını kontrol etmek için ayrı olarak da çalıştırabilirsiniz.

Vite Yapılandırma Dosyası

Vite'da yapılandırma dosyası, oluşturma işlemi için çeşitli seçenekleri tanımlar. Vite yapılandırma dosyası, JavaScript ve ES6 modüllerinin sözdizimini kullanır.

Varsayılan olarak, yapılandırma dosyanızı adlandırmalısınız. vite.config.js ve projenin kök dizinine yerleştirin.

Vite yapılandırma dosyasında en sık kullanılan seçeneklerden bazıları şunlardır:

• kök. Projenin kök dizinini belirtir.
• sunucu. Geliştirme sunucusunu yapılandırır. Bir API arka ucuna ana bilgisayar, bağlantı noktası ve proxy istekleri yapılandırmak için seçenekler içerir.
• eklentiler. Vite oluşturma sürecine eklentiler eklenmesine izin verir. Eklenti, yeni bir dosya formatı için destek eklemek veya kaynak kodunu dönüştürmek gibi derleme sürecini bir şekilde değiştiren bir işlevdir.
• çözmek. Bu, Vite'ın projedeki içe aktarmaları nasıl çözeceğini yapılandırır. Takma adları, uzantıları ve modül dizinlerini belirtmek için seçenekler içerir.

İşte bir Vite yapılandırma dosyası örneği:

içe aktarmak { tanımlaYapılandırma } itibaren"davet";
içe aktarmak yol itibaren'yol';
ihracatvarsayılan tanımlaYapılandırma({
 sunucu: {
 liman: 3000,
 açık: doğru,
 },
 çözmek: {
 takma ad: {
'@': path.resolve (__dirname, './src'),
 },
 },
 eklentiler: [],
});

Bu yapılandırma dosyası, aşağıdakilerle temel bir Vite projesi oluşturur:

• bağlantı noktasında çalışan bir yerel geliştirme sunucusu 3000
• için takma ad kaynak dizin
• eklenti yok

Vite'ın Güçlü Bir Topluluğu Var

Çeşitli çevrimiçi kaynaklar, Vite'ın React, Vue ve Angular gibi popüler çerçevelerle nasıl kullanılacağını ayrıntılı olarak açıklar.

Ek olarak, resmi belgelerinde Vite'ın etkili bir şekilde kullanılmasına ilişkin zengin bilgiler vardır. Mevcut bu kaynaklarla, Vite'ı bir sonraki projenize entegre etmek mümkündür.