Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Vite v4.0.4 objavljen je 3. siječnja 2023. i poboljšava funkcionalnost Vite razvojnog okruženja te dolazi samo pet mjeseci nakon Vite 3. Nova verzija dolazi s novim značajkama i ažuriranjima koja će iskustvo razvoja JavaScripta učiniti bržim i snažnijim nego prije.

Ovdje ćemo razgovarati o tome što je Vite, značajnim značajkama i ažuriranjima koja se nalaze u Vite 4.

Što ja Vite?

Sama riječ "vite" znači "brz". To je front-end alat za izgradnju i razvojni poslužitelj koji je dizajniran za pružanje bržeg, laganog i jednostavnog razvojnog iskustva. Služi vašem kodu tijekom razvoja, spaja vaše datoteke za proizvodnju i omogućuje jednostavnu integraciju s raznim JavaScript okviri i biblioteke, kao što su Vue, React, Preact i Svelte.

Vite doživio je brojna poboljšanja u posljednje dvije godine, a Vite 4 donosi nekoliko novih i poboljšanih značajki.

1. Skupni skup 3

Rollup

instagram viewer
je skupljač JavaScript modula koji programerima omogućuje spajanje različitih JavaScript moduli u jednu datoteku. To zauzvrat poboljšava izvedbu aplikacije smanjenjem broja zahtjeva koje preglednik treba napraviti za učitavanje koda.

Vite sada koristi Rollup 3 tijekom izgradnje. Vite verzija 3 koristila je Rollup 2, ali nakon izdanja Rollupa 3 u listopadu 2022., nova verzija Vitea došla je s velikom nadogradnjom na Rollup 3.

Prije nadogradnje na Rollup 3 trebali biste pogledati vodič za migraciju Rollup-a jer se mogu pojaviti problemi, iako je Rollup 3 uglavnom kompatibilan s Rollup-om 2.

2. Novi React dodatak koji koristi Speedy Web Compiler (SWC)

SWC je superbrzi JavaScript prevodilac napisan u Rustu. SWC i Babel oba su JavaScript prevoditelji koji pretvaraju vaš kod u ono što podržavaju preglednici, ali SWC tvrdi da je brži od Babela.

Budući da je Vite v3 koristio Babel, v4 dolazi s uvođenjem SWC-a kao zamjene ili alternative, posebno za React projekte.

Dok Vite nastavlja podržavati Babel, Vite 4 uvodi dva dodatka (vitejs/plugin-react i vitejs/plugin-react-swc) s različitim kompromisima za React projekte.

Dodatak vitejs/plugin-react

Ovaj dodatak omogućuje brzu Hot Module Replacement uz korištenje minimalne veličine paketa, korištenjem esbuild i Babel. Također nudi dodatnu fleksibilnost mogućnosti korištenja Babelovog transformacijskog cjevovoda.

Vruća zamjena modula omogućuje osvježavanje masti. Programerima omogućuje ažuriranje modula u pokrenutoj aplikaciji bez potrebe za osvježavanjem cijele stranice. Slijedite demonstraciju u nastavku da biste instalirali dodatak u svoj projekt.

npm instalirajte @vitejs/plugin-react

Slijedite donji kod za uvoz dodatka u svoj projekt;

uvoz {defineConfig} iz'vite'
uvoz reagirati iz'@vitejs/plugin-react'
izvozzadano definiConfig({
dodaci: [reagirati()],
})

Dodatak vitejs/plugin-react-swc

Ovo je novi dodatak koji koristi esbuild tijekom izgradnje i Speed ​​Web Compiler tijekom razvoja.

Zamjenom Babela sa SWC-om, dodatak ima za cilj značajno ubrzati razvojni proces, posebno za projekte koji ne zahtijevaju nestandardna React proširenja.

Evo kako instalirati dodatak;

npm i @vitejs/plugin-react-swc

Uvezite ga u svoj projekt na sljedeći način;

uvoz {defineConfig} iz"vite";
uvoz reagirati iz"@vitejs/plugin-react-swc";
izvozzadano definiConfig({
dodaci: [reagirati()],
});

3. Uvoz CSS-a kao niza

Ova značajka daje rješenje za ponašanje Vite 3 CSS dvostrukog učitavanja koje se događa uvozom zadanog izvoza CSS datoteke, npr.:

uvoz cssString iz'./global.css

Kako bi se spriječilo ovakvo ponašanje, Vite 4 uvodi upotrebu modifikatora sufiksa inline upita. Ovdje je demonstracija sintakse;

uvoz cssString iz'./global.css? u redu'

Zadani izvoz v3 CSS-a stoga je zastario.

4. Varijable okoline

Vite je ažurirao svoje ovisnosti o dotenv i dotenv-expand. Nove verzije koje se koriste su dotenv 16 i dotenv-expand 9. Ovo ažuriranje će zahtijevati da stavite vrijednosti koje uključuju znakove "#" ili "`" u navodnike kako biste osigurali ispravnu funkcionalnost. Evo primjera;

SECRET_HASH="nešto-s-a-#-hash"

Kako bi se olakšao proces ažuriranja ENV datoteka, Vite je preporučio korištenje dotenv sučelja naredbenog retka. Ovo je izborni dodatak koji može pomoći osigurati da su ENV datoteke dosljedne na različitim strojevima, okruženjima ili članovima tima. Može pomoći da proces ažuriranja ENV datoteka bude manje zamoran.

Ostale nadogradnje, popravci i migracija na Vite v4.0.4

Vite je dodao više prečaca sučelja naredbenog retka. Da biste vidjeli popis svih prečaca, pritisnite h tijekom razvoja.

Moderna verzija preglednika također sada prema zadanim postavkama cilja na safari14 za širu ES2020 kompatibilnost. Postoji podrška za patch-paket prilikom prethodnog povezivanja ovisnosti, postoje poboljšane poruke o pogrešci tijekom SSR-a i još mnogo toga.