Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Vite v4.0.4 a fost lansat pe 3 ianuarie 2023 și îmbunătățește funcționalitățile mediului de dezvoltare Vite și vine la doar cinci luni după Vite 3. Noua versiune vine cu noi funcții și actualizări care vor face experiența de dezvoltare JavaScript mai rapidă și mai puternică decât înainte.

Aici, vom discuta ce este Vite, caracteristicile semnificative și actualizările găsite în Vite 4.

Ce iI Vite?

Cuvântul „vite” în sine înseamnă „rapid”. Este un instrument de construcție front-end și un server de dezvoltare care este conceput pentru a oferi o experiență de dezvoltare mai rapidă, ușoară și simplă. Vă servește codul în timpul dezvoltării, vă grupează fișierele pentru producție și permite integrarea ușoară cu diverse Cadre și biblioteci JavaScript, cum ar fi Vue, React, Preact și Svelte.

Vite a suferit numeroase îmbunătățiri în ultimii doi ani, iar Vite 4 aduce câteva funcții noi și îmbunătățite.

instagram viewer

1. Rollup 3

Rulează este un pachet de module JavaScript care permite dezvoltatorilor să grupeze diferite module JavaScript într-un singur fișier. Aceasta, la rândul său, îmbunătățește performanța aplicației prin reducerea numărului de solicitări pe care browserul trebuie să le facă pentru a încărca codul.

Vite folosește acum Rollup 3 în timpul construirii. Versiunea 3 Vite a folosit Rollup 2, dar după lansarea Rollup 3 în octombrie 2022, noua versiune a Vite a venit cu o actualizare majoră la Rollup 3.

Ar trebui să consultați ghidul de migrare a pachetului complet înainte de a face upgrade la pachetul 3, deoarece pot apărea probleme, chiar dacă pachetul 3 este compatibil în mare parte cu pachetul 2.

2. Noul plugin React folosind Speedy Web Compiler (SWC)

SWC este un compilator JavaScript super-rapid scris în Rust. SWC și Babel sunt ambele compilatoare JavaScript care vă transformă codul în ceea ce este acceptat de browsere, dar SWC a pretins că este mai rapid decât Babel.

Deoarece Vite v3 a folosit Babel, v4 vine cu introducerea SWC ca înlocuitor sau alternativă, în special pentru proiectele React.

În timp ce Vite continuă să susțină Babel, Vite 4 introduce două plugin-uri (vitejs/plugin-react și vitejs/plugin-react-swc) cu diferite compromisuri pentru proiectele React.

Pluginul vitejs/plugin-react

Acest plugin oferă o înlocuire rapidă a modulului la cald folosind dimensiunea minimă a pachetului, prin utilizarea esbuild și Babel. De asemenea, oferă flexibilitatea suplimentară de a putea utiliza conducta de transformare Babel.

Înlocuirea la cald a modulului permite reîmprospătarea grăsimii. Permite dezvoltatorilor să actualizeze module dintr-o aplicație care rulează fără a fi necesar să reîmprospăteze întreaga pagină. Urmați demonstrația de mai jos pentru a instala pluginul în proiectul dvs.

npm install @vitejs/plugin-react

Urmați codul de mai jos pentru a importa pluginul în proiectul dvs.;

import { defineConfig } din„invitat”
import reacţiona din„@vitejs/plugin-react”
exportMod implicit defineConfig({
pluginuri: [reacţiona()],
})

Pluginul vitejs/plugin-react-swc

Acesta este un plugin nou care folosește esbuild în timpul construcției și Speed ​​Web Compiler în timpul dezvoltării.

Prin înlocuirea Babel cu SWC, pluginul își propune să accelereze semnificativ procesul de dezvoltare, în special pentru proiectele care nu necesită extensii React non-standard.

Iată cum se instalează pluginul;

npm eu @vitejs/plugin-react-swc

Importați-l în proiectul dvs. după cum urmează;

import { defineConfig } din"vite";
import reacţiona din„@vitejs/plugin-react-swc”;
exportMod implicit defineConfig({
pluginuri: [reacţiona()],
});

3. Importul CSS ca șir

Această caracteristică oferă o soluție pentru comportamentul de încărcare dublă CSS Vite 3 care apare prin importul exportului implicit al unui fișier CSS, de exemplu:

import cssString din'./global.css

Pentru a preveni acest comportament, Vite 4 introduce utilizarea modificatorului sufixului de interogare ?inline. Iată o demonstrație a sintaxei;

import cssString din'./global.css? în linie'

Exportul prestabilit CSS v3 a fost, prin urmare, retras.

4. variabile de mediu

Vite și-a actualizat dependențele de dotenv și dotenv-expand. Noile versiuni utilizate sunt dotenv 16 și, respectiv, dotenv-expand 9. Această actualizare vă va cere să includeți valorile care includ caracterele „#” sau „`” între ghilimele pentru a asigura funcționalitatea corespunzătoare. Iată un exemplu;

SECRET_HASH="ceva-cu-A-#-hash"

Pentru a ușura procesul de actualizare a fișierelor ENV, Vite a recomandat utilizarea interfeței de linie de comandă dotenv. Acesta este un plugin opțional care vă poate ajuta să vă asigurați că fișierele ENV sunt consistente pe diferite mașini, medii sau membri ai echipei. Poate ajuta procesul de actualizare a fișierelor ENV mai puțin obositor.

Alte actualizări, remedieri și migrare la Vite v4.0.4

Vite a adăugat mai multe comenzi rapide pentru interfața de linie de comandă. Pentru a vedea o listă cu toate comenzile rapide, apăsați h în timpul dezvoltării.

De asemenea, versiunea modernă a browserului vizează acum safari14 în mod implicit pentru o compatibilitate mai largă cu ES2020. Există suport pentru pachetul de patch-uri la pre-gruparea dependențelor, există mesaje de eroare îmbunătățite în timpul SSR și multe altele.