Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Vite v4.0.4 udgivet den 3. januar 2023 og forbedrer funktionaliteterne i Vite-udviklingsmiljøet og kommer kun fem måneder efter Vite 3. Den nye version kommer med nye funktioner og opdateringer, der vil gøre JavaScript-udviklingsoplevelsen hurtigere og stærkere end før.

Her vil vi diskutere, hvad Vite er, de væsentlige funktioner og opdateringer, der findes i Vite 4.

Hvad iI Vite?

Selve ordet "vite" betyder "hurtigt". Det er et front-end byggeværktøj og udviklingsserver, der er designet til at give en hurtigere, letvægts og enkel udviklingsoplevelse. Det serverer din kode under udviklingen, samler dine filer til produktion og tillader nem integration med forskellige JavaScript-rammer og biblioteker, såsom Vue, React, Preact og Svelte.

Vite har gennemgået adskillige forbedringer i de seneste to år, og Vite 4 bringer flere nye og forbedrede funktioner.

instagram viewer

1. Rollup 3

Rul op er en JavaScript modul bundler, der giver udviklere mulighed for at bundle forskellige JavaScript-moduler i en enkelt fil. Dette forbedrer igen applikationens ydeevne ved at reducere antallet af anmodninger, som browseren skal lave for at indlæse koden.

Vite bruger nu Rollup 3 under byggetiden. Vite version 3 brugte Rollup 2, men efter udgivelsen af ​​Rollup 3 i oktober 2022 kom den nye version af Vite med en større opgradering til Rollup 3.

Du bør henvise til Rollup-migreringsvejledningen, før du opgraderer til Rollup 3, da der kan opstå problemer, selvom Rollup 3 for det meste er kompatibel med Rollup 2.

2. Nyt React-plugin ved hjælp af Speedy Web Compiler (SWC)

SWC er en superhurtig JavaScript-compiler skrevet i Rust. SWC og Babel er begge JavaScript-compilere, der transformerer din kode til det, der understøttes af browsere, men SWC har hævdet at være hurtigere end Babel.

Da Vite v3 brugte Babel, kommer v4 med introduktionen af ​​SWC som en erstatning eller et alternativ, især til React-projekter.

Mens Vite fortsætter med at understøtte Babel, introducerer Vite 4 to plugins (vitejs/plugin-react og vitejs/plugin-react-swc) med forskellige afvejninger for React-projekter.

Vitejs/plugin-react Plugin

Dette plugin giver hurtig Hot Module Replacement, mens du bruger minimal pakkestørrelse ved at bruge esbuild og Babel. Det giver også den ekstra fleksibilitet at være i stand til at bruge Babels transformationspipeline.

Udskiftning af varmt modul muliggør fedtforfriskning. Det giver udviklere mulighed for at opdatere moduler i en kørende applikation uden at skulle opdatere hele siden. Følg nedenstående demonstration for at installere pluginnet i dit projekt.

npm installer @vitejs/plugin-react

Følg koden nedenfor for at importere pluginnet til dit projekt;

importere { defineConfig } fra'vite'
importere reagere fra'@vitejs/plugin-react'
eksportStandard defineConfig({
plugins: [reagere()],
})

Plugin'et vitejs/plugin-react-swc

Dette er et nyt plugin, der gør brug af esbuild under build og Speed ​​Web Compiler under udvikling.

Ved at erstatte Babel med SWC sigter pluginnet mod at fremskynde udviklingsprocessen betydeligt, især for projekter, der ikke kræver ikke-standard React-udvidelser.

Her er hvordan du installerer plugin'et;

npm i @vitejs/plugin-react-swc

Importer det til dit projekt som følger;

importere { defineConfig } fra"vite";
importere reagere fra"@vitejs/plugin-react-swc";
eksportStandard defineConfig({
plugins: [reagere()],
});

3. Import af CSS som en streng

Denne funktion giver en løsning på Vite 3 CSS dobbeltindlæsningsadfærd, der opstår ved at importere standardeksporten af ​​en CSS-fil, f.eks.:

importere cssString fra'./global.css

For at forhindre denne adfærd introducerer Vite 4 brugen af ​​?inline forespørgselssuffiksmodifikator. Her er en demonstration af syntaksen;

importere cssString fra'./global.css? inline'

V3 CSS-standardeksporten er derfor blevet forældet.

4. miljøvariabler

Vite opdaterede sine afhængigheder af dotenv og dotenv-expand. De nye versioner, der bruges, er henholdsvis dotenv 16 og dotenv-expand 9. Denne opdatering kræver, at du ombryder værdier, der inkluderer tegnene "#" eller "`" i anførselstegn for at sikre korrekt funktionalitet. Her er et eksempel;

SECRET_HASH="noget-med-en-#-hash"

For at lette processen med at opdatere ENV-filer har Vite anbefalet brugen af ​​dotenv-kommandolinjegrænsefladen. Dette er et valgfrit plugin, der kan hjælpe med at sikre, at ENV-filer er konsistente på tværs af forskellige maskiner, miljøer eller teammedlemmer. Det kan hjælpe med at gøre processen med at opdatere ENV-filer mindre kedelig.

Andre opgraderinger, rettelser og migrering til Vite v4.0.4

Vite har tilføjet flere kommandolinjegenveje. Tryk på for at se en liste over alle genvejene h under udvikling.

Den moderne browserbygning er nu også målrettet mod safari14 som standard for bredere ES2020-kompatibilitet. Der er understøttelse af patch-pakke ved præ-bundling afhængigheder, der er forbedrede fejlmeddelelser under SSR og meget mere.