A Vite v4.0.4 2023. január 3-án jelent meg, és továbbfejleszti a Vite fejlesztői környezet funkcióit, és mindössze öt hónappal a Vite 3 után érkezik. Az új verzió új funkciókat és frissítéseket tartalmaz, amelyek gyorsabbá és erősebbé teszik a JavaScript fejlesztési élményt, mint korábban.
Itt megvitatjuk, mi az a Vite, a Vite 4-ben található jelentős funkciók és frissítések.
Mi iI Vite?
Maga a „vite” szó jelentése „gyors”. Ez egy front-end build eszköz és fejlesztőkiszolgáló, amely gyorsabb, könnyű és egyszerű fejlesztési élményt biztosít. Kiszolgálja a kódot a fejlesztés során, csomagolja a fájlokat a termeléshez, és lehetővé teszi az egyszerű integrációt a különböző verziókkal JavaScript keretrendszerek és könyvtárak, mint például a Vue, React, Preact és Svelte.
Vite az elmúlt két évben számos fejlesztésen ment keresztül, és a Vite 4 számos új és továbbfejlesztett funkciót tartalmaz.
1. Összegzés 3
Felteker egy JavaScript modul bundler, amely lehetővé teszi a fejlesztők számára, hogy különböző csomagokat köthessenek össze JavaScript modulok egyetlen fájlba. Ez viszont javítja az alkalmazás teljesítményét azáltal, hogy csökkenti a böngészőnek a kód betöltéséhez szükséges kérések számát.
A Vite most a Rollup 3-ot használja az építési idő alatt. A Vite 3-as verziója a Rollup 2-t használta, de a Rollup 3 2022 októberi kiadását követően a Vite új verziója a Rollup 3 jelentős frissítésével érkezett.
A 3. összesítőre való frissítés előtt olvassa el az összesítő áttelepítési útmutatót, mivel problémák léphetnek fel, még akkor is, ha a 3. összesítő kompatibilis a 2. összesítővel.
2. Új React bővítmény Speedy Web Compiler (SWC) használatával
SWC egy Rust nyelven írt szupergyors JavaScript fordító. SWC és Bábel mindkettő JavaScript-fordító, amely átalakítja a kódot a böngészők által támogatottra, de az SWC azt állította, hogy gyorsabb, mint a Babel.
Mivel a Vite v3 a Babelt használta, a v4 az SWC-t helyettesíti vagy alternatívaként tartalmazza, különösen a React projekteknél.
Míg a Vite továbbra is támogatja a Babelt, a Vite 4 két beépülő modult (vitejs/plugin-react és vitejs/plugin-react-swc) vezet be, különböző kompromisszumokkal a React projektekhez.
A vitejs/plugin-react beépülő modul
Ez a beépülő modul gyors Hot Module cserét biztosít minimális csomagméret mellett, az esbuild és a Babel használatával. A Babel transzformációs folyamat további rugalmasságát is kínálja.
A forró modulcsere lehetővé teszi a zsírfrissítést. Lehetővé teszi a fejlesztők számára a modulok frissítését egy futó alkalmazásban anélkül, hogy a teljes oldalt frissíteni kellene. Kövesse az alábbi bemutatót a bővítmény projektbe történő telepítéséhez.
npm install @vitejs/plugin-react
Kövesse az alábbi kódot a beépülő modul projektbe történő importálásához;
import { defineConfig } tól től"vite"
import reagál tól től"@vitejs/plugin-react"
exportalapértelmezett defineConfig({
bővítmények: [reagál()],
})
A vitejs/plugin-react-swc beépülő modul
Ez egy új beépülő modul, amely az esbuildet használja fel az építés során, és a Speed Web Compilert a fejlesztés során.
A Babel SWC-re cserélésével a bővítmény jelentősen felgyorsítja a fejlesztési folyamatot, különösen azoknál a projekteknél, amelyek nem igényelnek nem szabványos React bővítményeket.
Itt van a bővítmény telepítése;
npm i @vitejs/plugin-react-swc
Importálja a projektjébe az alábbiak szerint;
import { defineConfig } tól től"vite";
import reagál tól től"@vitejs/plugin-react-swc";
exportalapértelmezett defineConfig({
bővítmények: [reagál()],
});
3. CSS importálása karakterláncként
Ez a funkció megoldást nyújt a Vite 3 CSS kettős betöltési viselkedésére, amely egy CSS-fájl alapértelmezett exportjának importálásával fordul elő, például:
import cssString tól től'./global.cssEnnek elkerülése érdekében a Vite 4 bevezeti a ?inline query utótag módosító használatát. Itt van a szintaxis bemutatója;
import cssString tól től'./global.css? Sorban'A v3 CSS alapértelmezett exportálása ezért elavult.
4. Környezeti változók
A Vite frissítette a dotenv és a dotenv-expand függőségeit. A használt új verziók a dotenv 16 és a dotenv-expand 9. Ez a frissítés megköveteli, hogy a „#” vagy „`” karaktereket idézőjelek között tartalmazó értékeket tördelje a megfelelő működés érdekében. Itt van egy példa;
SECRET_HASH="valami-val vel-a-#-hash"Az ENV fájlok frissítésének megkönnyítése érdekében a Vite a dotenv parancssori felület használatát javasolta. Ez egy opcionális beépülő modul, amely segíthet abban, hogy az ENV-fájlok konzisztensek legyenek a különböző gépeken, környezetekben vagy csapattagokon. Segítségével kevésbé fárasztó az ENV-fájlok frissítésének folyamata.
Egyéb frissítések, javítások és átállás a Vite v4.0.4-re
A Vite több parancssori interfész parancsikont adott hozzá. Az összes parancsikon listájának megtekintéséhez nyomja meg a gombot h fejlesztés során.
A modern böngészőépítés alapértelmezés szerint a safari14-et is megcélozza a szélesebb körű ES2020 kompatibilitás érdekében. Támogatja a patch-csomagot a függőségek előcsomagolásakor, javított hibaüzenetek jelennek meg az SSR során és még sok más.
