Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Vite v4.0.4 släpptes den 3 januari 2023 och förbättrar funktionerna i Vite-utvecklingsmiljön och kommer bara fem månader efter Vite 3. Den nya versionen kommer med nya funktioner och uppdateringar som kommer att göra JavaScript-utvecklingsupplevelsen snabbare och starkare än tidigare.

Här kommer vi att diskutera vad Vite är, de viktiga funktionerna och uppdateringarna som finns i Vite 4.

Vad iI Vite?

Själva ordet "vite" betyder "snabbt". Det är ett front-end-byggverktyg och en utvecklingsserver som är designad för att ge en snabbare, lätt och enkel utvecklingsupplevelse. Den serverar din kod under utvecklingen, paketerar dina filer för produktion och möjliggör enkel integration med olika JavaScript-ramverk och bibliotek, som Vue, React, Preact och Svelte.

Vite har genomgått många förbättringar under de senaste två åren, och Vite 4 har flera nya och förbättrade funktioner.

instagram viewer

1. Rollup 3

Rulla upp är en JavaScript-modulbuntare som tillåter utvecklare att bunta olika JavaScript-moduler till en enda fil. Detta förbättrar i sin tur applikationens prestanda genom att minska antalet förfrågningar som webbläsaren behöver göra för att ladda koden.

Vite använder nu Rollup 3 under byggtiden. Vite version 3 använde Rollup 2 men efter lanseringen av Rollup 3 i oktober 2022 kom den nya versionen av Vite med en stor uppgradering till Rollup 3.

Du bör läsa migreringsguiden för samlad lagring innan du uppgraderar till samlad 3, eftersom problem kan uppstå, även om samlad 3 är mest kompatibel med samlad 2.

2. Ny React-plugin med Speedy Web Compiler (SWC)

SWC är en supersnabb JavaScript-kompilator skriven i Rust. SWC och Babel är båda JavaScript-kompilatorer som omvandlar din kod till vad som stöds av webbläsare men SWC har påstått sig vara snabbare än Babel.

Eftersom Vite v3 använde Babel kommer v4 med introduktionen av SWC som en ersättning eller alternativ, speciellt för React-projekt.

Medan Vite fortsätter att stödja Babel, introducerar Vite 4 två plugins (vitejs/plugin-react och vitejs/plugin-react-swc) med olika avvägningar för React-projekt.

Insticksprogrammet vitejs/plugin-react

Denna plugin ger snabb ersättning av Hot Module samtidigt som den använder minimal paketstorlek, genom att använda esbuild och Babel. Det ger också den extra flexibiliteten att kunna använda Babels transformpipeline.

Het modulbyte möjliggör fettuppfräschning. Det tillåter utvecklare att uppdatera moduler i en applikation som körs utan att behöva uppdatera hela sidan. Följ demonstrationen nedan för att installera plugin-programmet i ditt projekt.

npm installera @vitejs/plugin-react

Följ koden nedan för att importera plugin-programmet till ditt projekt;

importera { defineConfig } från'vite'
importera reagera från'@vitejs/plugin-react'
exporterastandard defineConfig({
plugins: [reagera()],
})

Insticksprogrammet vitejs/plugin-react-swc

Detta är ett nytt plugin som använder sig av esbuild under byggandet och Speed ​​Web Compiler under utveckling.

Genom att ersätta Babel med SWC syftar plugin till att avsevärt påskynda utvecklingsprocessen, särskilt för projekt som inte kräver icke-standardiserade React-tillägg.

Så här installerar du plugin-programmet;

npm i @vitejs/plugin-react-swc

Importera det till ditt projekt enligt följande;

importera { defineConfig } från"vite";
importera reagera från"@vitejs/plugin-react-swc";
exporterastandard defineConfig({
plugins: [reagera()],
});

3. Importera CSS som en sträng

Den här funktionen ger en lösning på Vite 3 CSS-dubbelladdningsbeteende som uppstår genom att importera standardexporten av en CSS-fil, t.ex.:

importera cssString från'./global.css

För att förhindra detta beteende introducerar Vite 4 användningen av ?inline query suffix modifier. Här är en demonstration av syntaxen;

importera cssString från'./global.css? i kö'

Standardexporten för v3 CSS har därför fasats ut.

4. Miljövariabler

Vite uppdaterade sina beroenden av dotenv och dotenv-expand. De nya versionerna som används är dotenv 16 respektive dotenv-expand 9. Denna uppdatering kräver att du radbryter värden som inkluderar tecknen "#" eller "`" inom citattecken för att säkerställa korrekt funktionalitet. Här är ett exempel;

SECRET_HASH="något-med-a-#-hash"

För att underlätta processen att uppdatera ENV-filer har Vite rekommenderat användningen av dotenvs kommandoradsgränssnitt. Detta är ett valfritt plugin som kan hjälpa till att säkerställa att ENV-filer är konsekventa över olika maskiner, miljöer eller teammedlemmar. Det kan hjälpa till att göra processen att uppdatera ENV-filer mindre tråkig.

Andra uppgraderingar, korrigeringar och migrering till Vite v4.0.4

Vite har lagt till fler kommandoradsgenvägar. För att se en lista över alla genvägar, tryck h under utvecklingen.

Den moderna webbläsarbyggnaden är nu också inriktad på safari14 som standard för bredare ES2020-kompatibilitet. Det finns stöd för patch-paket vid pre-bundling beroenden, det finns förbättrade felmeddelanden under SSR och mycket mer.