Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Vite v4.0.4 utgitt 3. januar 2023 og forbedrer funksjonene til Vite-utviklingsmiljøet og kommer bare fem måneder etter Vite 3. Den nye versjonen kommer med nye funksjoner og oppdateringer som vil gjøre JavaScript-utviklingsopplevelsen raskere og sterkere enn før.

Her vil vi diskutere hva Vite er, de viktige funksjonene og oppdateringene som finnes i Vite 4.

Hva iI Vite?

Selve ordet "vite" betyr "rask". Det er et front-end byggeverktøy og utviklingsserver som er designet for å gi en raskere, lett og enkel utviklingsopplevelse. Den serverer koden din under utvikling, samler filene dine for produksjon og tillater enkel integrasjon med ulike JavaScript-rammeverk og biblioteker, som Vue, React, Preact og Svelte.

Vite har gjennomgått en rekke forbedringer de siste to årene, og Vite 4 har flere nye og forbedrede funksjoner.

1. Rollup 3

Rull opp er en JavaScript-modulpakker som lar utviklere pakke forskjellige

instagram viewer
JavaScript-moduler i en enkelt fil. Dette forbedrer i sin tur ytelsen til applikasjonen ved å redusere antallet forespørsler nettleseren må gjøre for å laste koden.

Vite bruker nå Rollup 3 under byggetiden. Vite versjon 3 brukte Rollup 2, men etter utgivelsen av Rollup 3 i oktober 2022 kom den nye versjonen av Vite med en større oppgradering til Rollup 3.

Du bør se på overføringsveiledningen for sammendrag før du oppgraderer til sammendrag 3, siden problemer kan oppstå, selv om sammendrag 3 stort sett er kompatibelt med sammendrag 2.

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

SWC er en superrask JavaScript-kompilator skrevet i Rust. SWC og Babel er begge JavaScript-kompilatorer som transformerer koden din til det som støttes av nettlesere, men SWC har hevdet å være raskere enn Babel.

Siden Vite v3 brukte Babel, kommer v4 med introduksjonen av SWC som en erstatning eller et alternativ, spesielt for React-prosjekter.

Mens Vite fortsetter å støtte Babel, introduserer Vite 4 to plugins (vitejs/plugin-react og vitejs/plugin-react-swc) med forskjellige avveininger for React-prosjekter.

Vitejs/plugin-react Plugin

Denne plugin gir rask utskifting av varmemoduler mens du bruker minimal pakkestørrelse, ved å bruke esbuild og Babel. Det gir også den ekstra fleksibiliteten ved å kunne bruke Babel-transformasjonsrørledningen.

Utskifting av varm modul muliggjør fettoppdatering. Det lar utviklere oppdatere moduler i en applikasjon som kjører uten å måtte oppdatere hele siden. Følg demonstrasjonen nedenfor for å installere plugin-en i prosjektet ditt.

npm installer @vitejs/plugin-react

Følg koden nedenfor for å importere plugin-en til prosjektet ditt;

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

Plugin-en vitejs/plugin-react-swc

Dette er en ny plugin som bruker esbuild under bygging, og Speed ​​Web Compiler under utvikling.

Ved å erstatte Babel med SWC, har plugin som mål å øke hastigheten på utviklingsprosessen betydelig, spesielt for prosjekter som ikke krever ikke-standard React-utvidelser.

Her er hvordan du installerer plugin-en;

npm i @vitejs/plugin-react-swc

Importer det til prosjektet ditt som følger;

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

3. Importere CSS som en streng

Denne funksjonen gir en løsning på Vite 3 CSS-dobbeltlastingsadferd som oppstår ved å importere standardeksporten av en CSS-fil, f.eks.:

import cssString fra'./global.css

For å forhindre denne oppførselen introduserer Vite 4 bruken av ?inline query suffiksmodifikator. Her er en demonstrasjon av syntaksen;

import cssString fra'./global.css? på linje'

Standardeksporten for v3 CSS er derfor avviklet.

4. Miljøvariabler

Vite oppdaterte sine avhengigheter til dotenv og dotenv-expand. De nye versjonene som brukes er henholdsvis dotenv 16 og dotenv-expand 9. Denne oppdateringen krever at du bryter verdier som inkluderer tegnene "#" eller "`" i anførselstegn for å sikre riktig funksjonalitet. Her er et eksempel;

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

For å lette prosessen med å oppdatere ENV-filer, har Vite anbefalt bruk av dotenv-kommandolinjegrensesnittet. Dette er en valgfri plugin som kan bidra til å sikre at ENV-filer er konsistente på tvers av forskjellige maskiner, miljøer eller teammedlemmer. Det kan bidra til å gjøre prosessen med å oppdatere ENV-filer mindre kjedelig.

Andre oppgraderinger, rettelser og migrering til Vite v4.0.4

Vite har lagt til flere kommandolinjesnarveier. For å se en liste over alle snarveiene, trykk h under utvikling.

Den moderne nettleserbyggingen er nå også målrettet mot safari14 som standard for bredere ES2020-kompatibilitet. Det er støtte for patch-pakke ved pre-bundling avhengigheter, det er forbedrede feilmeldinger under SSR og mye mer.