Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Vite v4.0.4 vydaný 3. januára 2023 a vylepšuje funkcie vývojového prostredia Vite a prichádza len päť mesiacov po Vite 3. Nová verzia prichádza s novými funkciami a aktualizáciami, vďaka ktorým bude vývoj JavaScriptu rýchlejší a silnejší ako predtým.

Tu budeme diskutovať o tom, čo je Vite, o významných funkciách a aktualizáciách, ktoré sa nachádzajú vo Vite 4.

Čo iI Vite?

Samotné slovo "vite" znamená "rýchlo". Je to front-end nástroj na zostavovanie a vývojový server, ktorý je navrhnutý tak, aby poskytoval rýchlejší, ľahký a jednoduchý vývojový zážitok. Slúži vášmu kódu počas vývoja, spája vaše súbory na výrobu a umožňuje jednoduchú integráciu s rôznymi JavaScriptové rámce a knižnice, ako sú Vue, React, Preact a Svelte.

Vite za posledné dva roky prešiel mnohými vylepšeniami a Vite 4 prináša niekoľko nových a vylepšených funkcií.

1. Súhrn 3

Vyhrnúť je balík modulov JavaScript, ktorý umožňuje vývojárom spájať rôzne balíky

instagram viewer
moduly JavaScript do jedného súboru. To zase zlepšuje výkon aplikácie znížením počtu požiadaviek, ktoré musí prehliadač vykonať na načítanie kódu.

Vite teraz počas zostavovania používa Rollup 3. Vite verzia 3 používala Rollup 2, ale po vydaní Rollup 3 v októbri 2022 prišla nová verzia Vite s veľkou inováciou na Rollup 3.

Pred inováciou na súhrnnú verziu 3 by ste si mali prečítať sprievodcu migráciou súhrnu, pretože sa môžu vyskytnúť problémy, hoci súhrnná verzia 3 je väčšinou kompatibilná s súhrnnou verziou 2.

2. Nový React Plugin využívajúci Speedy Web Compiler (SWC)

SWC je superrýchly kompilátor JavaScriptu napísaný v jazyku Rust. SWC a Babel sú oba kompilátory JavaScript, ktoré transformujú váš kód na to, čo podporujú prehliadače, ale SWC tvrdil, že je rýchlejší ako Babel.

Keďže Vite v3 používal Babel, v4 prichádza so zavedením SWC ako náhrady alebo alternatívy, najmä pre projekty React.

Zatiaľ čo Vite naďalej podporuje Babel, Vite 4 predstavuje dva doplnky (vitejs/plugin-react a vitejs/plugin-react-swc) s rôznymi kompromismi pre projekty React.

Plugin vitejs/plugin-react

Tento plugin poskytuje rýchlu výmenu Hot Module pri použití minimálnej veľkosti balíka pomocou esbuild a Babel. Ponúka tiež pridanú flexibilitu v možnosti použitia transformačného potrubia Babel.

Výmena horúceho modulu umožňuje obnovenie tuku. Umožňuje vývojárom aktualizovať moduly v spustenej aplikácii bez toho, aby museli obnovovať celú stránku. Podľa nižšie uvedenej ukážky nainštalujte doplnok do svojho projektu.

npm install @vitejs/plugin-react

Podľa kódu nižšie importujte doplnok do svojho projektu;

importovať { defineConfig } od'vite'
importovať reagovať od'@vitejs/plugin-react'
exportpredvolená defineConfig({
pluginy: [reagovať()],
})

Doplnok vitejs/plugin-react-swc

Toto je nový doplnok, ktorý využíva esbuild počas zostavovania a Speed ​​Web Compiler počas vývoja.

Nahradením Babel SWC má plugin za cieľ výrazne urýchliť proces vývoja, najmä pre projekty, ktoré nevyžadujú neštandardné rozšírenia React.

Tu je návod, ako nainštalovať doplnok;

npm a @vitejs/plugin-react-swc

Importujte ho do svojho projektu nasledovne;

importovať { defineConfig } od"vítať";
importovať reagovať od"@vitejs/plugin-react-swc";
exportpredvolená defineConfig({
pluginy: [reagovať()],
});

3. Import CSS ako reťazec

Táto funkcia poskytuje riešenie pre správanie dvojitého načítania CSS Vite 3, ku ktorému dochádza pri importovaní predvoleného exportu súboru CSS, napr.:

importovať cssString od'./global.css

Aby sa predišlo tomuto správaniu, Vite 4 zavádza použitie modifikátora prípony inline dotazu. Tu je ukážka syntaxe;

importovať cssString od'./global.css? v rade'

Predvolený export CSS verzie 3 bol preto zastaraný.

4. Premenné prostredia

Vite aktualizoval svoje závislosti na dotenv a dotenv-expand. Používané nové verzie sú dotenv 16 a dotenv-expand 9. Táto aktualizácia bude vyžadovať zalomenie hodnôt, ktoré obsahujú znaky "#" alebo "`" v úvodzovkách, aby sa zabezpečila správna funkčnosť. Tu je príklad;

SECRET_HASH="niečo-s-a-#-hash"

Na uľahčenie procesu aktualizácie súborov ENV spoločnosť Vite odporučila použitie rozhrania príkazového riadka dotenv. Toto je voliteľný doplnok, ktorý môže pomôcť zabezpečiť konzistentnosť súborov ENV na rôznych počítačoch, prostrediach alebo členoch tímu. Môže to pomôcť urobiť proces aktualizácie súborov ENV menej únavným.

Ďalšie upgrady, opravy a migrácia na Vite v4.0.4

Vite pridal ďalšie skratky rozhrania príkazového riadku. Ak chcete zobraziť zoznam všetkých skratiek, stlačte tlačidlo h počas vývoja.

Moderná zostava prehliadača sa teraz štandardne zameriava na safari14 pre širšiu kompatibilitu ES2020. K dispozícii je podpora pre patch-package pri predbežnom spájaní závislostí, vylepšené chybové hlásenia počas SSR a oveľa viac.