Začínáme s Vite: Ultimate Build Tool

S tím, jak se webové aplikace stávají bohatšími na funkce, poptávka po rychlých a účinných nástrojích pro tvorbu neustále roste.

Vite je moderní nástroj pro sestavení, který poskytuje bleskově rychlý vývojový server a optimalizovaný proces sestavení, což uživatelům umožňuje zefektivnit jejich pracovní postup a zlepšit zkušenost koncového uživatele.

Prozkoumáte, jak začít s Vite, pokryjete proces instalace, základní funkce a příkazy rozhraní příkazového řádku (CLI).

Inicializujte projekt Vite

Než budete moci použít Vite, musíte nainstalovat Node.js a Node Package Manager ve vašem systému. Po instalaci těchto dvou balíčků můžete přistoupit k vytvoření projektu pomocí Vite.

Zde je návod, jak inicializovat projekt pomocí Vite pomocí npm:

npm init vite

Když spustíte tento příkaz, vytvoří se nový projekt Vite ve vašem aktuálním pracovním adresáři. Příkaz vás vyzve k provedení základních konfiguračních voleb pro nastavení vašeho nového projektu Vite.

Zde je rozpis možností, k jejichž výběru vás příkaz vyzve:

1. Název Projektu. Když příkaz spustíte, vyzve vás k zadání názvu nového projektu. Jméno, které zadáte, se také objeví v package.json a slouží jako název adresáře vašeho projektu.
2. Vyberte rámec. Tato výzva vás vyzve k výběru rámce pro váš projekt. Vite v současné době podporuje populární front-end frameworky jako React, Vue, Angular a možnost Vanilla pro prostý JavaScript kód.
3. Vyberte si variantu. To vás vyzve k výběru varianty pro váš projekt zahrnující alternativy, jako je JavaScript a jeho podmnožinou jazyk TypeScript.

Poté, co poskytnete požadované informace, Vite vygeneruje novou strukturu projektu ve vašem aktuálním pracovním adresáři. Struktura bude představovat základní nastavení projektu, včetně a package.json soubor, a src adresář s an index.html a main.js soubor a a veřejnost adresář.

Po vytvoření struktury projektu můžete spuštěním přejít do adresáře projektu CD . Jakmile tak učiníte, nainstalujte všechny další závislosti, které váš projekt může vyžadovat, pomocí instalace npm příkaz.

Chcete-li spustit vývojový server a sledovat všechny změny provedené ve vašem projektu, spusťte soubor npm spustit dev příkaz ve vašem projektovém terminálu.

Vlastnosti Vite

Funkce Vite se zaměřují na zefektivnění procesu sestavování a vylepšení prostředí při vytváření webu.

Server pro rychlý vývoj

Vývojový server Vite využívá nativní moduly ES a pomalé načítání modulů, což umožňuje neuvěřitelnou rychlost. To umožňuje rychlé zpětnovazební smyčky a bleskurychlé startovací časy.

Optimalizovaný proces sestavení

Společnost Vite vylepšila svůj postup sestavení tak, aby produkoval optimalizovaný a miniifikovaný kód připravený na produkci. Navíc vytvoří soubor manifestu, který může ukládat do mezipaměti busty a prostředky verzí.

Podpora různých front-end frameworků

Vite podporuje různé front-endové rámce, včetně Vue a podobné frameworky jako React Js a Angular Js. To umožňuje vývojářům vybrat si preferovaný rámec a využít výkonné schopnosti Vite.

Výměna horkého modulu (HMR)

Funkce Hot Module Replacement (HMR) Vite umožňuje rychlé a bezproblémové aktualizace aplikace bez nutnosti úplného obnovení stránky. Díky tomu je proces vývoje rychlejší a efektivnější.

Předzpracování CSS a integrace PostCSS

Vite podporuje předzpracování CSS, včetně Sass, Less a Stylus. Integruje se také s PostCSS, což umožňuje další transformace a optimalizace CSS.

Vite přichází s mnoha dalšími funkcemi, včetně podpory pro TypeScript, JSX a WebAssembly. S vydáním Vite v4.0.4, komunita vývojářů Vite se rozrostla a aktivně udržuje software a přidává pravidelné nové funkce.

Rozhraní příkazového řádku Vite (CLI)

Rozhraní příkazového řádku (CLI) Vite je praktický nástroj pro přizpůsobení chování Vite. Poskytuje řadu základních příkazů, které také pomáhají zefektivnit proces vývoje. Zde jsou některé z klíčových příkazů CLI:

vite stavět

Tento příkaz vytvoří aplikaci pro produkční prostředí, optimalizuje a minimalizuje kód, aby byl připraven k nasazení. Pomocí tohoto příkazu můžete zajistit, že vaše aplikace bude co nejrychlejší a nejefektivnější a připravená k distribuci vašim uživatelům.

vite náhled

Tento příkaz umožňuje zobrazit náhled vygenerovaného kódu před jeho nasazením do produkce. Pokud chcete zajistit, aby vše vypadalo a fungovalo podle očekávání a nevyskytly se žádné zjevné problémy nebo problémy vyžadující pozornost, je tento užitečný příkaz spustit.

optimalizovat vite

optimalizovat vite je k dispozici ve Vite 2.6 a novějších verzích, které analyzují kód projektu a generují optimalizovaná produkční sestavení pomocí stromové struktury třepání, operace dělení kódu a vkládání malých aktiv přímo do konečného sestavení, aby se snížily požadavky na načtení aplikace.

optimalizovat vite automaticky provede během vite stavět příkaz, který generuje optimalizovaná produkční sestavení. Můžete jej také spustit samostatně a zkontrolovat velikost sestavení a výkon

Konfigurační soubor Vite

Ve Vite konfigurační soubor definuje různé možnosti procesu sestavení. Konfigurační soubor Vite používá JavaScript a syntaxi modulů ES6.

Ve výchozím nastavení byste měli konfigurační soubor pojmenovat vite.config.js a umístěte jej do kořenového adresáře projektu.

Zde jsou některé z nejčastěji používaných možností v konfiguračním souboru Vite:

• vykořenit. Určuje kořenový adresář projektu.
• server. Konfiguruje vývojový server. Zahrnuje možnosti pro konfiguraci hostitele, portu a požadavků na proxy pro backend API.
• pluginy. Umožňuje přidat pluginy do procesu sestavení Vite. Plugin je funkce, která nějakým způsobem upravuje proces sestavování, jako je přidání podpory pro nový formát souboru nebo transformace zdrojového kódu.
• odhodlání. Tím se nakonfiguruje, jak Vite řeší importy v projektu. Zahrnuje volby pro specifikaci aliasů, rozšíření a adresářů modulů.

Zde je příklad konfiguračního souboru Vite:

import { defineConfig } z'vite';
import cesta z'cesta';
vývoznívýchozí defineConfig({
 server: {
 přístav: 3000,
 OTEVŘENO: skutečný,
 },
 vyřešit: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 pluginy: [],
});

Tento konfigurační soubor nastaví základní projekt Vite s:

• lokální vývojový server běžící na portu 3000
• alias pro src adresář
• žádné pluginy

Vite má silnou komunitu

Několik online zdrojů velmi podrobně vysvětluje, jak používat Vite s populárními frameworky, jako jsou React, Vue a Angular.

Kromě toho je v oficiální dokumentaci mnoho informací o efektivním používání Vite. S těmito dostupnými zdroji je integrace Vite do vašeho dalšího projektu možná.