Construiți-vă aplicațiile web complexe în mai puțin timp, cu o buclă de feedback mai rapidă, folosind Vite.

Pe măsură ce aplicațiile web devin mai bogate în funcții, nevoia de instrumente de construcție rapide și eficiente continuă să crească în cerere.

Vite este un instrument modern de construire care oferă un server de dezvoltare extrem de rapid și un proces de construire optimizat, permițând utilizatorilor să-și simplifice fluxul de lucru și să îmbunătățească experiența utilizatorului final.

Veți explora cum să începeți cu Vite, acoperind procesul de instalare, caracteristicile esențiale și comenzile CLI (Command Line Interface).

Inițializați un proiect Vite

Înainte de a putea folosi Vite, trebuie să instalați Node.js și Node Package Manager pe sistemul dvs. După instalarea acestor două pachete, puteți continua să creați un proiect cu Vite.

Iată cum să inițializați un proiect cu Vite folosind npm:

npm init vite

Când rulați această comandă, se creează un nou proiect Vite în directorul de lucru curent. Comanda vă solicită să faceți alegeri fundamentale de configurare pentru a vă configura noul proiect Vite.

instagram viewer

Iată o detaliere a opțiunilor pe care comanda vă solicită să le selectați:

  1. Denumirea Proiectului. Când rulați comanda, vă solicită să furnizați un nume pentru noul dvs. proiect. Numele pe care îl furnizați va apărea și în pachet.json fișier și servește drept nume pentru directorul proiectului.
  2. Alegeți un cadru. Acest prompt vă va cere să alegeți un cadru pentru proiectul dvs. Vite acceptă în prezent framework-uri front-end populare, cum ar fi React, Vue, Angular și o opțiune Vanilla pentru codul JavaScript simplu.
  3. Alegeți o variantă. Acest lucru vă solicită să alegeți o variantă pentru proiectul dvs., acoperind alternative precum JavaScript și subsetul său de limbaj TypeScript.

După ce furnizați informațiile necesare, Vite va genera o nouă structură de proiect în directorul dvs. de lucru actual. Structura va reprezenta o configurație de bază a proiectului, inclusiv a pachet.json dosar, a src director cu un index.html și main.js dosar și a public director.

După crearea structurii proiectului, puteți naviga la directorul proiectului rulând CD . Odată ce ați făcut acest lucru, instalați orice dependențe suplimentare de care proiectul dvs. le poate necesita folosind instalare npm comanda.

Pentru a porni un server de dezvoltare și pentru a monitoriza orice modificări aduse proiectului dvs., veți rula programul npm run dev comanda din terminalul proiectului.

Caracteristicile Vite

Funcțiile Vite se concentrează pe simplificarea procesului de construire și pe îmbunătățirea experienței de construire web.

Server de dezvoltare rapidă

Serverul de dezvoltare Vite utilizează module ES native și încărcare leneșă a modulelor, permițând o viteză incredibilă. Acest lucru permite bucle de feedback rapide și timpi de pornire extrem de rapid.

Proces de construcție optimizat

Vite și-a îmbunătățit procedura de construire pentru a produce cod gata de producție, optimizat și redus. În plus, creează un fișier manifest care poate stoca în cache elementele de bust și versiune.

Suport pentru diverse cadre front-end

Vite acceptă diverse cadre front-end, inclusiv Vue și cadre similare precum React Js și Angular Js. Acest lucru le permite dezvoltatorilor să aleagă cadrul preferat și să valorifice capabilitățile puternice ale Vite.

Înlocuire modul cald (HMR)

Caracteristica Vite Hot Module Replacement (HMR) permite actualizări rapide și fără întreruperi ale aplicației, fără a necesita o reîmprospătare completă a paginii. Acest lucru face ca procesul de dezvoltare să fie mai rapid și mai eficient.

Preprocesare CSS și integrare PostCSS

Vite acceptă preprocesarea CSS, inclusiv Sass, Less și Stylus. De asemenea, se integrează cu PostCSS, permițând transformări și optimizări suplimentare pentru CSS.

Vite vine cu multe alte caracteristici, inclusiv suport pentru TypeScript, JSX și WebAssembly. Odată cu lansarea Vite v4.0.4, comunitatea de dezvoltatori Vite a crescut și a întreținut în mod activ software-ul, adăugând noi funcții regulate.

Interfața de linie de comandă a lui Vite (CLI)

Interfața de linie de comandă (CLI) a Vite este un instrument util pentru personalizarea comportamentului Vite. Oferă o serie de comenzi esențiale care ajută, de asemenea, la eficientizarea procesului de dezvoltare. Iată câteva dintre comenzile cruciale CLI:

vite build

Această comandă va construi aplicația pentru un mediu de producție, optimizând și minimizând codul, astfel încât să fie gata de implementare. Folosind această comandă, vă puteți asigura că aplicația dvs. este cât mai rapidă și eficientă posibil și gata de distribuție către utilizatori.

vite previzualizare

Această comandă vă permite să previzualizați codul generat înainte de a-l implementa în producție. Dacă doriți să vă asigurați că totul arată și funcționează conform așteptărilor și că nu există probleme aparente sau probleme care necesită atenție, aceasta este o comandă utilă de executat.

vite optimiza

vite optimiza este disponibil în Vite 2.6 și versiunile ulterioare care analizează codul de proiect și generează versiuni optimizate de producție prin realizarea arborelui agitare, operațiuni de împărțire a codului și încorporare a activelor mici direct în versiunea finală pentru a reduce solicitările necesare pentru încărcarea aplicația.

vite optimiza se execută automat în timpul vite build comandă, care generează versiuni optimizate de producție. De asemenea, îl puteți rula separat pentru a verifica dimensiunea și performanța construcției

Fișierul de configurare al lui Vite

În Vite, fișierul de configurare definește diferite opțiuni pentru procesul de construire. Fișierul de configurare Vite utilizează JavaScript și sintaxa modulelor ES6.

În mod implicit, ar trebui să denumiți fișierul de configurare vite.config.js și plasați-l în directorul rădăcină al proiectului.

Iată câteva dintre opțiunile cele mai frecvent utilizate în fișierul de configurare Vite:

  • rădăcină. Specifică directorul rădăcină al proiectului.
  • Server. Configura serverul de dezvoltare. Include opțiuni pentru configurarea gazdei, portului și solicitărilor de proxy către un backend API.
  • pluginuri. Permite adăugarea de pluginuri la procesul de construire Vite. Un plugin este o funcție care modifică într-un fel procesul de construire, cum ar fi adăugarea de suport pentru un nou format de fișier sau transformarea codului sursă.
  • rezolva. Aceasta configurează modul în care Vite rezolvă importurile în proiect. Include opțiuni pentru specificarea aliasurilor, extensiilor și directoarelor modulelor.

Iată un exemplu de fișier de configurare Vite:

import { defineConfig } din„invitat”;
import cale din'cale';
exportMod implicit defineConfig({
 Server: {
 port: 3000,
 deschis: Adevărat,
 },
 rezolva: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 pluginuri: [],
});

Acest fișier de configurare configurează un proiect Vite de bază cu:

  • un server de dezvoltare locală care rulează pe port 3000
  • un alias pentru src director
  • fara pluginuri

Vite are o comunitate puternică

Mai multe resurse online explică în detaliu cum să utilizați Vite cu cadre populare precum React, Vue și Angular.

În plus, există o mulțime de informații despre utilizarea eficientă a Vite în documentația sa oficială. Cu aceste resurse disponibile, este posibilă integrarea Vite în următorul tău proiect.