Kako začeti uporabljati Vite: najboljše orodje za gradnjo

Ker postajajo spletne aplikacije bogatejše s funkcijami, potreba po hitrih in učinkovitih orodjih za gradnjo še naprej narašča.

Vite je sodobno orodje za gradnjo, ki zagotavlja bliskovito hiter razvojni strežnik in optimiziran proces gradnje, kar uporabnikom omogoča racionalizacijo njihovega delovnega toka in izboljšanje izkušnje končnega uporabnika.

Raziskali boste, kako začeti z Viteom, pri čemer boste obravnavali njegov postopek namestitve, bistvene funkcije in ukaze vmesnika ukazne vrstice (CLI).

Inicializirajte projekt Vite

Preden lahko uporabite Vite, morate namestiti Node.js in Node Package Manager v vašem sistemu. Po namestitvi teh dveh paketov lahko nadaljujete z ustvarjanjem projekta z Vite.

Tukaj je opisano, kako inicializirati projekt z Vite z uporabo npm:

npm init vite

Ko zaženete ta ukaz, ustvari nov projekt Vite v vašem trenutnem delovnem imeniku. Ukaz vas pozove, da naredite temeljne konfiguracijske izbire za nastavitev vašega novega projekta Vite.

Tukaj je razčlenitev možnosti, ki jih ukaz pozove, da izberete:

1. Ime projekta. Ko zaženete ukaz, vas pozove, da vnesete ime za svoj novi projekt. Ime, ki ga navedete, bo prikazano tudi v package.json datoteko in služi kot ime imenika vašega projekta.
2. Izberite okvir. V tem pozivu boste morali izbrati okvir za svoj projekt. Vite trenutno podpira priljubljena sprednja ogrodja, kot so React, Vue, Angular in možnost Vanilla za navadno kodo JavaScript.
3. Izberite različico. To vas pozove, da izberete različico za svoj projekt, ki zajema alternative, kot sta JavaScript in njegov podnabor jezik TypeScript.

Ko vnesete zahtevane informacije, bo Vite ustvaril novo strukturo projekta v vašem trenutnem delovnem imeniku. Struktura bo predstavljala osnovno postavitev projekta, vključno z a package.json datoteka, a src imenik z an index.html in main.js datoteka in a javnosti imenik.

Ko ustvarite strukturo projekta, se lahko pomaknete do imenika projekta z zagonom cd . Ko to storite, namestite vse dodatne odvisnosti, ki jih morda potrebuje vaš projekt z uporabo namestitev npm ukaz.

Če želite zagnati razvojni strežnik in spremljati morebitne spremembe v vašem projektu, boste zagnali npm run dev ukaz znotraj terminala vašega projekta.

Značilnosti Vite

Funkcije Vite se osredotočajo na poenostavitev postopka gradnje in izboljšanje izkušnje spletne gradnje.

Strežnik za hitri razvoj

Razvojni strežnik Vite uporablja izvorne module ES in leno nalaganje modulov, kar omogoča neverjetno hitrost. To omogoča hitre povratne zanke in bliskovito hitre zagonske čase.

Optimiziran postopek gradnje

Vite je izboljšal svoj postopek izdelave za izdelavo optimizirane in pomanjšane kode, pripravljene za proizvodnjo. Poleg tega ustvari datoteko manifesta, ki lahko predpomni sredstva razpršitve in različice.

Podpora za različne front-end okvire

Vite podpira različna sprednja ogrodja, vključno z Vue in podobna ogrodja, kot sta React Js in Angular Js. To omogoča razvijalcem, da izberejo svoje želeno ogrodje in izkoristijo zmogljive zmogljivosti Vite.

Zamenjava vročega modula (HMR)

Funkcija Hot Module Replacement (HMR) podjetja Vite omogoča hitre in brezhibne posodobitve aplikacije, ne da bi bilo treba osvežiti celotno stran. Zaradi tega je razvojni proces hitrejši in učinkovitejši.

Predobdelava CSS in integracija PostCSS

Vite podpira predprocesiranje CSS, vključno s Sass, Less in Stylus. Prav tako se integrira s PostCSS, kar omogoča dodatne transformacije in optimizacije CSS.

Vite ima številne druge funkcije, vključno s podporo za TypeScript, JSX in WebAssembly. Z izdajo Vite v4.0.4, je skupnost razvijalcev Vite zrasla in aktivno vzdržuje programsko opremo ter redno dodaja nove funkcije.

Viteov vmesnik ukazne vrstice (CLI)

Viteov vmesnik ukazne vrstice (CLI) je priročno orodje za prilagajanje vedenja Vite. Zagotavlja vrsto bistvenih ukazov, ki prav tako pomagajo racionalizirati razvojni proces. Tukaj je nekaj ključnih ukazov CLI:

vite zgradba

Ta ukaz bo zgradil aplikacijo za produkcijsko okolje, optimiziral in zmanjšal kodo, da bo pripravljena za uvedbo. S tem ukazom lahko zagotovite, da je vaša aplikacija kar se da hitra in učinkovita ter pripravljena za distribucijo vašim uporabnikom.

vite predogled

Ta ukaz vam omogoča predogled ustvarjene kode, preden jo uvedete v produkcijo. Če želite zagotoviti, da vse izgleda in deluje po pričakovanjih in da ni očitnih težav ali težav, ki bi zahtevale pozornost, je ta ukaz koristen za zagon.

vite optimizacija

vite optimizacija je na voljo v Vite 2.6 in novejših različicah, ki analizirajo projektno kodo in ustvarjajo optimizirane proizvodne gradnje z izvajanjem drevesa pretresanje, operacije delitve kode in vdelava majhnih sredstev neposredno v končno zgradbo za zmanjšanje zahtev, potrebnih za nalaganje aplikacija

vite optimizacija se samodejno izvede med vite zgradba ukaz, ki generira optimizirane proizvodne zgradbe. Zaženete ga lahko tudi ločeno, da preverite velikost in zmogljivost gradnje

Konfiguracijska datoteka Vite

V Viteu konfiguracijska datoteka definira različne možnosti za postopek gradnje. Konfiguracijska datoteka Vite uporablja JavaScript in sintakso modulov ES6.

Privzeto bi morali poimenovati svojo konfiguracijsko datoteko vite.config.js in ga postavite v korenski imenik projekta.

Tukaj je nekaj najpogosteje uporabljenih možnosti v konfiguracijski datoteki Vite:

• korenina. Podaja korenski imenik projekta.
• strežnik. Konfigurira razvojni strežnik. Vključuje možnosti za konfiguracijo gostitelja, vrat in proxy zahtev za zaledje API-ja.
• vtičniki. Omogoča dodajanje vtičnikov v postopek gradnje Vite. Vtičnik je funkcija, ki na nek način spremeni postopek izdelave, kot je dodajanje podpore za novo obliko datoteke ali preoblikovanje izvorne kode.
• rešiti. To konfigurira, kako Vite razreši uvoze v projektu. Vključuje možnosti za določanje vzdevkov, razširitev in imenikov modulov.

Tukaj je primer konfiguracijske datoteke Vite:

uvoz {defineConfig} od'vite';
uvoz pot od'pot';
izvozprivzeto defineConfig({
 strežnik: {
 pristanišče: 3000,
 odprto: prav,
 },
 razreši: {
 vzdevek: {
'@': path.resolve (__dirname, './src'),
 },
 },
 vtičniki: [],
});

Ta konfiguracijska datoteka nastavi osnovni projekt Vite z:

• lokalni razvojni strežnik, ki deluje na vratih 3000
• vzdevek za src imenik
• brez vtičnikov

Vite ima močno skupnost

Več spletnih virov zelo podrobno pojasnjuje, kako uporabljati Vite s priljubljenimi okviri, kot so React, Vue in Angular.

Poleg tega je v uradni dokumentaciji veliko informacij o učinkoviti uporabi Vite. S temi razpoložljivimi viri je mogoče vključiti Vite v vaš naslednji projekt.