Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Vite v4.0.4 ilmus 3. jaanuaril 2023 ja täiustab Vite arenduskeskkonna funktsioone ning tuleb vaid viis kuud pärast Vite 3. Uue versiooniga on kaasas uued funktsioonid ja uuendused, mis muudavad JavaScripti arenduskogemuse varasemast kiiremaks ja tugevamaks.

Siin arutame, mis on Vite, olulised funktsioonid ja Vite 4 värskendused.

Mida iI Vite?

Sõna "vite" ise tähendab "kiire". See on esiotsa koostamise tööriist ja arendusserver, mis on loodud pakkuma kiiremat, kerget ja lihtsat arenduskogemust. See teenindab teie koodi arenduse ajal, koondab teie failid tootmiseks ja võimaldab hõlpsat integreerimist erinevatega JavaScripti raamistikud ja teegid, nagu Vue, React, Preact ja Svelte.

Vite on viimase kahe aasta jooksul läbi teinud mitmeid täiustusi ning Vite 4 toob kaasa mitmeid uusi ja täiustatud funktsioone.

1. Rollup 3

Üles kerima on JavaScripti mooduli komplekteerija, mis võimaldab arendajatel komplekteerida erinevaid

instagram viewer
JavaScripti moodulid ühte faili. See omakorda parandab rakenduse jõudlust, vähendades päringute arvu, mida brauser peab koodi laadimiseks tegema.

Vite kasutab nüüd koostamisajal Rollup 3. Vite versioon 3 kasutas Rollup 2, kuid pärast Rollup 3 väljaandmist 2022. aasta oktoobris tuli Vite uus versioon Rollup 3 olulise uuendusega.

Enne 3. koondkomplektile üleviimist peaksite tutvuma koondüleviimise juhendiga, kuna võib esineda probleeme, kuigi 3. koond ühildub enamasti 2. koondiga.

2. Uus Reacti pistikprogramm Speedy Web Compileri (SWC) abil

SWC on ülikiire Rust keeles kirjutatud JavaScripti kompilaator. SWC ja Paabel on mõlemad JavaScripti kompilaatorid, mis muudavad teie koodi brauserite toetatavaks, kuid SWC on väitnud, et on kiirem kui Babel.

Kuna Vite v3 kasutas Babelit, on v4-ga kaasas SWC asendus või alternatiiv, eriti Reacti projektide jaoks.

Kuigi Vite jätkab Babeli toetamist, tutvustab Vite 4 kahte pluginat (vitejs/plugin-react ja vitejs/plugin-react-swc), millel on Reacti projektide jaoks erinevad kompromissid.

Plugin vitejs/plugin-react

See pistikprogramm pakub esbuildi ja Babeli abil kiiret kuuma mooduli asendamist, kasutades minimaalset paketi suurust. See pakub ka täiendavat paindlikkust, kuna on võimalik kasutada Babeli teisenduskonveieri.

Kuuma mooduli vahetus võimaldab rasva värskendamist. See võimaldab arendajatel värskendada töötava rakenduse mooduleid, ilma et peaksid kogu lehte värskendama. Pistikprogrammi oma projekti installimiseks järgige allolevat tutvustust.

npm installi @vitejs/plugin-react

Pistikprogrammi oma projekti importimiseks järgige allolevat koodi;

importida { defineConfig } alates'vite'
importida reageerida alates'@vitejs/plugin-react'
eksportidavaikimisi defineConfig({
pistikprogrammid: [reageerida()],
})

Plugin vitejs/plugin-react-swc

See on uus pistikprogramm, mis kasutab ehitamise ajal funktsiooni esbuild ja arenduse ajal Speed ​​Web Compileri.

Asendades Babeli SWC-ga, on pistikprogrammi eesmärk arendusprotsessi märkimisväärselt kiirendada, eriti projektide puhul, mis ei vaja mittestandardseid Reacti laiendusi.

Siit saate teada, kuidas pistikprogrammi installida;

npm i @vitejs/plugin-react-swc

Importige see oma projekti järgmiselt;

importida { defineConfig } alates"vite";
importida reageerida alates"@vitejs/plugin-react-swc";
eksportidavaikimisi defineConfig({
pistikprogrammid: [reageerida()],
});

3. CSS-i importimine stringina

See funktsioon annab lahenduse Vite 3 CSS-i topeltlaadimise käitumisele, mis ilmneb CSS-faili vaikeekspordi importimisel, nt:

importida cssString alates'./global.css

Selle käitumise vältimiseks tutvustab Vite 4 ?inline päringu järelliidete modifikaatorit. Siin on süntaksi demonstratsioon;

importida cssString alates'./global.css? järjekorras'

V3 CSS-i vaikeeksport on seetõttu aegunud.

4. Keskkonnamuutujad

Vite värskendas oma sõltuvusi dotenv-st ja dotenv-expandist. Uued kasutusel olevad versioonid on vastavalt dotenv 16 ja dotenv-expand 9. See värskendus nõuab õige funktsionaalsuse tagamiseks murramist väärtused, mis sisaldavad jutumärkides märke "#" või "`". Siin on näide;

SECRET_HASH="midagi-koos-a-#-räsi"

ENV-failide värskendamise protsessi hõlbustamiseks on Vite soovitanud kasutada dotenv käsurea liidest. See on valikuline pistikprogramm, mis aitab tagada ENV-failide ühtsuse erinevates masinates, keskkondades või meeskonnaliikmetes. See võib aidata muuta ENV-failide värskendamise protsessi vähem tüütuks.

Muud täiendused, parandused ja üleviimine versioonile Vite v4.0.4

Vite on lisanud rohkem käsurea liidese otseteid. Kõigi otseteede loendi vaatamiseks vajutage h arendamise käigus.

Kaasaegne brauseriversioon sihib nüüd ka laiema ES2020 ühilduvuse tagamiseks vaikimisi safari14. Sõltuvuste eelkomplekteerimisel on paigapakettide tugi, SSR-i ajal on täiustatud veateated ja palju muud.