Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Vite v4.0.4 je bil izdan 3. januarja 2023 in izboljšuje funkcionalnosti razvojnega okolja Vite ter prihaja le pet mesecev po Vite 3. Nova različica prihaja z novimi funkcijami in posodobitvami, zaradi katerih bo razvojna izkušnja JavaScript hitrejša in močnejša kot prej.

Tukaj bomo razpravljali o tem, kaj je Vite, o pomembnih funkcijah in posodobitvah v Vite 4.

Kaj iI Vite?

Sama beseda "vite" pomeni "hitro". To je sprednje orodje za gradnjo in razvojni strežnik, ki je zasnovan tako, da zagotavlja hitrejšo, lahko in preprosto razvojno izkušnjo. Služi vaši kodi med razvojem, združuje vaše datoteke za proizvodnjo in omogoča preprosto integracijo z različnimi Ogrodja in knjižnice JavaScript, kot so Vue, React, Preact in Svelte.

Vite je bil v zadnjih dveh letih deležen številnih izboljšav, Vite 4 pa prinaša več novih in izboljšanih funkcij.

1. Zbirka 3

instagram viewer

Zavihamo je povezovalnik modulov JavaScript, ki razvijalcem omogoča združevanje različnih moduli JavaScript v eno datoteko. To posledično izboljša delovanje aplikacije z zmanjšanjem števila zahtev, ki jih mora brskalnik narediti za nalaganje kode.

Vite zdaj med gradnjo uporablja Rollup 3. Vite različica 3 je uporabljal Rollup 2, vendar je po izdaji Rollup 3 oktobra 2022 nova različica Vite prišla z večjo nadgradnjo na Rollup 3.

Preden nadgradite na Rollup 3, si oglejte vodnik za selitev Rollup, saj lahko pride do težav, čeprav je Rollup 3 večinoma združljiv s Rollup 2.

2. Nov vtičnik React z uporabo Speedy Web Compiler (SWC)

SWC je super hiter prevajalnik JavaScript, napisan v Rustu. SWC in Babel sta oba prevajalnika JavaScript, ki vašo kodo pretvorita v tisto, kar podpirajo brskalniki, vendar SWC trdi, da je hitrejši od Babela.

Ker je Vite v3 uporabljal Babel, prihaja v4 z uvedbo SWC kot zamenjavo ali alternativo, zlasti za projekte React.

Medtem ko Vite še naprej podpira Babel, Vite 4 predstavlja dva vtičnika (vitejs/plugin-react in vitejs/plugin-react-swc) z različnimi kompromisi za projekte React.

Vtičnik vitejs/plugin-react

Ta vtičnik omogoča hitro zamenjavo vročega modula ob uporabi minimalne velikosti paketa z uporabo esbuild in Babel. Ponuja tudi dodatno prilagodljivost, saj lahko uporablja cevovod transformacije Babel.

Vroča zamenjava modula omogoča osvežitev maščobe. Razvijalcem omogoča posodobitev modulov v delujoči aplikaciji, ne da bi morali osvežiti celotno stran. Sledite spodnji predstavitvi, da namestite vtičnik v svoj projekt.

npm namestite @vitejs/plugin-react

Sledite spodnji kodi, da uvozite vtičnik v svoj projekt;

uvoz {defineConfig} od'vite'
uvoz reagirati od'@vitejs/plugin-react'
izvozprivzeto defineConfig({
vtičniki: [reagiraj()],
})

Vtičnik vitejs/plugin-react-swc

To je nov vtičnik, ki uporablja esbuild med gradnjo in Speed ​​Web Compiler med razvojem.

Z zamenjavo Babel s SWC želi vtičnik bistveno pospešiti razvojni proces, zlasti za projekte, ki ne zahtevajo nestandardnih razširitev React.

Tukaj je opisano, kako namestiti vtičnik;

npm i @vitejs/plugin-react-swc

Uvozite ga v svoj projekt na naslednji način;

uvoz {defineConfig} od"vite";
uvoz reagirati od"@vitejs/plugin-react-swc";
izvozprivzeto defineConfig({
vtičniki: [reagiraj()],
});

3. Uvažanje CSS kot niza

Ta funkcija nudi rešitev za dvojno nalaganje Vite 3 CSS, do katerega pride z uvozom privzetega izvoza datoteke CSS, npr.:

uvoz cssString od'./global.css

Da prepreči to vedenje, Vite 4 uvaja uporabo modifikatorja pripone poizvedbe ?inline. Tukaj je predstavitev sintakse;

uvoz cssString od'./global.css? v vrsti'

Privzeti izvoz v3 CSS je zato opuščen.

4. Spremenljivke okolja

Vite je posodobil svoje odvisnosti od dotenv in dotenv-expand. Novi različici, ki se uporabljata, sta dotenv 16 oziroma dotenv-expand 9. Ta posodobitev bo zahtevala, da zavijete vrednosti, ki vključujejo znake "#" ali "`" v narekovajih, da zagotovite pravilno delovanje. Tukaj je primer;

SECRET_HASH="nekaj-z-a-#-hash"

Za olajšanje postopka posodabljanja datotek ENV je Vite priporočil uporabo vmesnika ukazne vrstice dotenv. To je izbirni vtičnik, ki lahko pomaga zagotoviti, da so datoteke ENV skladne v različnih napravah, okoljih ali članih skupine. Lahko pomaga narediti postopek posodabljanja datotek ENV manj dolgočasen.

Druge nadgradnje, popravki in selitev na Vite v4.0.4

Vite je dodal več bližnjic vmesnika ukazne vrstice. Če si želite ogledati seznam vseh bližnjic, pritisnite h med razvojem.

Sodobna zgradba brskalnika zdaj privzeto cilja tudi na safari14 za širšo združljivost ES2020. Na voljo je podpora za paket popravkov pri predzdruževanju odvisnosti, na voljo so izboljšana sporočila o napakah med SSR in še veliko več.