I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Vite v4.0.4 è stato rilasciato il 3 gennaio 2023 e migliora le funzionalità dell'ambiente di sviluppo Vite e arriva solo cinque mesi dopo Vite 3. La nuova versione include nuove funzionalità e aggiornamenti che renderanno l'esperienza di sviluppo JavaScript più veloce e più forte di prima.

Qui discuteremo cos'è Vite, le caratteristiche e gli aggiornamenti significativi trovati in Vite 4.

Cosa iI Vite?

La stessa parola "vite" significa "veloce". È uno strumento di creazione front-end e un server di sviluppo progettato per fornire un'esperienza di sviluppo più veloce, leggera e semplice. Serve il tuo codice durante lo sviluppo, raggruppa i tuoi file per la produzione e consente una facile integrazione con vari Framework e librerie JavaScript, come Vue, React, Preact e Svelte.

Vite ha subito numerosi miglioramenti negli ultimi due anni e Vite 4 offre diverse funzionalità nuove e migliorate.

instagram viewer

1. Arrotolare 3

Arrotolare è un bundler di moduli JavaScript che consente agli sviluppatori di raggruppare diversi Moduli javascript in un unico file. Ciò a sua volta migliora le prestazioni dell'applicazione riducendo il numero di richieste che il browser deve effettuare per caricare il codice.

Vite ora usa Rollup 3 durante il tempo di costruzione. La versione 3 di Vite utilizzava Rollup 2 ma dopo il rilascio di Rollup 3 nell'ottobre 2022, la nuova versione di Vite è arrivata con un importante aggiornamento a Rollup 3.

È necessario fare riferimento alla guida alla migrazione del rollup prima di eseguire l'aggiornamento al rollup 3, poiché potrebbero verificarsi problemi, anche se il rollup 3 è per lo più compatibile con il rollup 2.

2. Nuovo plug-in React utilizzando Speedy Web Compiler (SWC)

SWC è un compilatore JavaScript superveloce scritto in Rust. SWC e Babele sono entrambi compilatori JavaScript che trasformano il tuo codice in ciò che è supportato dai browser, ma SWC ha affermato di essere più veloce di Babel.

Poiché Vite v3 utilizzava Babel, v4 viene fornito con l'introduzione di SWC come sostituto o alternativa, in particolare per i progetti React.

Mentre Vite continua a supportare Babel, Vite 4 introduce due plugin (vitejs/plugin-react e vitejs/plugin-react-swc) con diversi compromessi per i progetti React.

Il plugin vitejs/plugin-react

Questo plugin fornisce una rapida sostituzione del modulo caldo utilizzando dimensioni minime del pacchetto, utilizzando esbuild e Babel. Offre inoltre la flessibilità aggiuntiva di poter utilizzare la pipeline di trasformazione di Babel.

La sostituzione del modulo a caldo consente il fat refresh. Consente agli sviluppatori di aggiornare i moduli in un'applicazione in esecuzione senza dover aggiornare l'intera pagina. Segui la dimostrazione qui sotto per installare il plugin nel tuo progetto.

npm install @vitejs/plugin-react

Segui il codice qui sotto per importare il plugin nel tuo progetto;

importare {defineConfig} da'vite'
importare reagire da'@vitejs/plugin-reagire'
esportarepredefinito defineConfig({
plugin: [reagire()],
})

Il plugin vitejs/plugin-react-swc

Questo è un nuovo plugin che utilizza esbuild durante la compilazione e Speed ​​Web Compiler durante lo sviluppo.

Sostituendo Babel con SWC, il plugin mira ad accelerare notevolmente il processo di sviluppo, in particolare per i progetti che non richiedono estensioni React non standard.

Ecco come installare il plugin;

npm i @vitejs/plugin-react-swc

Importalo nel tuo progetto come segue;

importare {defineConfig} da"vite";
importare reagire da"@vitejs/plugin-react-swc";
esportarepredefinito defineConfig({
plugin: [reagire()],
});

3. Importazione di CSS come stringa

Questa funzione fornisce una soluzione al comportamento di doppio caricamento CSS di Vite 3 che si verifica importando l'esportazione predefinita di un file CSS, ad esempio:

importare cssString da'./global.css

Per prevenire questo comportamento, Vite 4 introduce l'uso del modificatore di suffisso di query in linea. Ecco una dimostrazione della sintassi;

importare cssString da'./global.css? in linea'

L'esportazione predefinita CSS v3 è stata pertanto deprecata.

4. variabili ambientali

Vite ha aggiornato le sue dipendenze su dotenv e dotenv-expand. Le nuove versioni utilizzate sono rispettivamente dotenv 16 e dotenv-expand 9. Questo aggiornamento richiederà di racchiudere i valori che includono i caratteri "#" o "`" tra virgolette per garantire il corretto funzionamento. Ecco un esempio;

SECRET_HASH="qualcosa-con-UN-#-cancelletto"

Per facilitare il processo di aggiornamento dei file ENV, Vite ha raccomandato l'uso dell'interfaccia a riga di comando dotenv. Questo è un plug-in facoltativo che può aiutare a garantire che i file ENV siano coerenti tra macchine, ambienti o membri del team diversi. Può aiutare a rendere meno noioso il processo di aggiornamento dei file ENV.

Altri aggiornamenti, correzioni e migrazione a Vite v4.0.4

Vite ha aggiunto più scorciatoie all'interfaccia della riga di comando. Per visualizzare un elenco di tutte le scorciatoie, premere H durante lo sviluppo.

La build del browser moderno ora si rivolge anche a safari14 per impostazione predefinita per una più ampia compatibilità ES2020. C'è il supporto per il pacchetto di patch durante il pre-raggruppamento delle dipendenze, ci sono messaggi di errore migliorati durante SSR e molto altro.