Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Vite v4.0.4 vydaný 3. ledna 2023 a vylepšuje funkce vývojového prostředí Vite a přichází pouhých pět měsíců po Vite 3. Nová verze přichází s novými funkcemi a aktualizacemi, díky kterým bude vývoj JavaScriptu rychlejší a silnější než dříve.

Zde probereme, co je Vite, významné funkce a aktualizace nalezené ve Vite 4.

Co iI Vite?

Samotné slovo „vite“ znamená „rychle“. Jedná se o front-end nástroj pro sestavení a vývojový server, který je navržen tak, aby poskytoval rychlejší, lehčí a jednoduchý vývoj. Slouží vašemu kódu během vývoje, sdružuje vaše soubory pro produkci a umožňuje snadnou integraci s různými JavaScriptové rámce a knihovny, jako jsou Vue, React, Preact a Svelte.

Vite za poslední dva roky prošel řadou vylepšení a Vite 4 přináší několik nových a vylepšených funkcí.

1. Shrnutí 3

Srolovat je balíček modulů JavaScript, který umožňuje vývojářům sdružovat různé balíčky

instagram viewer
JavaScript moduly do jednoho souboru. To zase zlepšuje výkon aplikace snížením počtu požadavků, které musí prohlížeč provést, aby načetl kód.

Vite nyní během sestavování používá Rollup 3. Vite verze 3 používal Rollup 2, ale po vydání Rollup 3 v říjnu 2022 přišla nová verze Vite s velkým upgradem na Rollup 3.

Před upgradem na Rollup 3 byste si měli prostudovat průvodce migrací kumulativních verzí, protože se mohou vyskytnout problémy, i když je kumulativní verze 3 většinou kompatibilní s kumulativní verzí 2.

2. Nový React Plugin využívající Speedy Web Compiler (SWC)

SWC je superrychlý kompilátor JavaScriptu napsaný v Rustu. SWC a Babel jsou oba kompilátory JavaScriptu, které transformují váš kód na to, co podporují prohlížeče, ale SWC tvrdil, že je rychlejší než Babel.

Protože Vite v3 používal Babel, přichází v4 se zavedením SWC jako náhrady nebo alternativy, zejména pro projekty React.

Zatímco Vite nadále podporuje Babel, Vite 4 zavádí dva pluginy (vitejs/plugin-react a vitejs/plugin-react-swc) s různými kompromisy pro projekty React.

Plugin vitejs/plugin-react

Tento plugin poskytuje rychlou výměnu Hot Module při použití minimální velikosti balíčku pomocí esbuild a Babel. Nabízí také přidanou flexibilitu v možnosti použití transformačního potrubí Babel.

Výměna horkého modulu umožňuje obnovení tuku. Umožňuje vývojářům aktualizovat moduly v běžící aplikaci, aniž by museli obnovovat celou stránku. Podle níže uvedené ukázky nainstalujte plugin do svého projektu.

npm install @vitejs/plugin-react

Podle níže uvedeného kódu importujte plugin do svého projektu;

import { defineConfig } z'vite'
import reagovat z'@vitejs/plugin-react'
vývoznívýchozí defineConfig({
pluginy: [reagovat()],
})

Plugin vitejs/plugin-react-swc

Toto je nový plugin, který využívá esbuild během sestavování a Speed ​​Web Compiler během vývoje.

Nahrazením Babelu SWC má plugin za cíl výrazně urychlit proces vývoje, zejména u projektů, které nevyžadují nestandardní rozšíření React.

Zde je návod, jak nainstalovat plugin;

npm i @vitejs/plugin-react-swc

Importujte jej do svého projektu následovně;

import { defineConfig } z"víte";
import reagovat z"@vitejs/plugin-react-swc";
vývoznívýchozí defineConfig({
pluginy: [reagovat()],
});

3. Import CSS jako řetězec

Tato funkce poskytuje řešení pro chování dvojitého načítání CSS Vite 3, ke kterému dochází při importu výchozího exportu souboru CSS, např.:

import cssString z'./global.css

Aby se tomuto chování zabránilo, Vite 4 zavádí použití modifikátoru přípony vloženého dotazu. Zde je ukázka syntaxe;

import cssString z'./global.css? v souladu'

Výchozí export CSS v3 byl proto zastaralý.

4. Proměnné prostředí

Vite aktualizoval své závislosti na dotenv a dotenv-expand. Nové používané verze jsou dotenv 16 a dotenv-expand 9. Tato aktualizace bude vyžadovat zalomení hodnot, které obsahují znaky "#" nebo "`" do uvozovek, aby byla zajištěna správná funkčnost. Zde je příklad;

SECRET_HASH="něco-s-A-#-hash"

Pro usnadnění procesu aktualizace souborů ENV společnost Vite doporučila použití rozhraní příkazového řádku dotenv. Toto je volitelný plugin, který může pomoci zajistit, aby soubory ENV byly konzistentní na různých počítačích, prostředích nebo členech týmu. Může pomoci, aby byl proces aktualizace souborů ENV méně únavný.

Další upgrady, opravy a migrace na Vite v4.0.4

Vite přidal další zkratky rozhraní příkazového řádku. Chcete-li zobrazit seznam všech zkratek, stiskněte h během vývoje.

Moderní sestavení prohlížeče se nyní také ve výchozím nastavení zaměřuje na safari14 pro širší kompatibilitu ES2020. Existuje podpora pro patch-package při předběžném sdružování závislostí, jsou zde vylepšené chybové zprávy během SSR a mnoho dalšího.