Začíname s Vite: Ultimate Build Tool

Keďže webové aplikácie sa stávajú bohatšími na funkcie, dopyt po rýchlych a efektívnych nástrojoch na zostavovanie neustále rastie.

Vite je moderný nástroj na zostavovanie, ktorý poskytuje bleskovo rýchly vývojový server a optimalizovaný proces zostavovania, čo používateľom umožňuje zefektívniť pracovný tok a zlepšiť zážitok koncového používateľa.

Preskúmate, ako začať s Vite, pokryjete proces inštalácie, základné funkcie a príkazy rozhrania príkazového riadka (CLI).

Inicializujte projekt Vite

Pred použitím Vite, musíte nainštalovať Node.js a Node Package Manager vo vašom systéme. Po nainštalovaní týchto dvoch balíkov môžete pristúpiť k vytvoreniu projektu pomocou Vite.

Tu je návod, ako inicializovať projekt pomocou Vite pomocou npm:

npm init vite

Keď spustíte tento príkaz, vytvorí sa nový projekt Vite vo vašom aktuálnom pracovnom adresári. Príkaz vás vyzve, aby ste urobili základné konfiguračné voľby na nastavenie vášho nového projektu Vite.

Tu je rozpis možností, ktorých výber vás príkaz vyzve:

1. Názov Projektu. Keď spustíte príkaz, vyzve vás na zadanie názvu vášho nového projektu. Meno, ktoré zadáte, sa zobrazí aj v package.json súbor a slúži ako názov vášho projektového adresára.
2. Vyberte si rámec. Táto výzva vás požiada o výber rámca pre váš projekt. Vite v súčasnosti podporuje populárne front-end rámce ako React, Vue, Angular a možnosť Vanilla pre obyčajný kód JavaScript.
3. Vyberte Variant. To vás vyzve, aby ste si vybrali variant pre svoj projekt, ktorý zahŕňa alternatívy, ako sú JavaScript a jeho podmnožinu jazyka TypeScript.

Po zadaní požadovaných informácií Vite vygeneruje novú štruktúru projektu vo vašom aktuálnom pracovnom adresári. Štruktúra bude predstavovať základné nastavenie projektu, vrátane a package.json súbor, a src adresár s index.html a main.js súbor a a verejnosti adresár.

Po vytvorení štruktúry projektu môžete prejsť do adresára projektu spustením cd . Keď to urobíte, nainštalujte všetky ďalšie závislosti, ktoré môže váš projekt vyžadovať, pomocou inštalácia npm príkaz.

Ak chcete spustiť vývojový server a sledovať všetky zmeny vykonané vo vašom projekte, spustite npm spustiť dev príkaz v rámci vášho projektového terminálu.

Vlastnosti Vite

Funkcie Vite sa zameriavajú na zefektívnenie procesu vytvárania a vylepšenie zážitku z vytvárania webu.

Server rýchleho vývoja

Vývojový server Vite využíva natívne ES moduly a pomalé načítanie modulov, čo umožňuje neuveriteľnú rýchlosť. To umožňuje rýchle spätné väzby a bleskurýchle štartovacie časy.

Optimalizovaný proces zostavovania

Vite vylepšil svoj postup zostavovania tak, aby produkoval produkčný, optimalizovaný a miniifikovaný kód. Okrem toho vytvorí súbor manifestu, ktorý môže uložiť do vyrovnávacej pamäte busty a prvky verzie.

Podpora pre rôzne front-end rámce

Vite podporuje rôzne front-end rámce vrátane Vue a podobné rámce ako React Js a Angular Js. To umožňuje vývojárom vybrať si preferovaný rámec a využiť výkonné schopnosti Vite.

Výmena horúceho modulu (HMR)

Funkcia Vite Hot Module Replacement (HMR) umožňuje rýchle a bezproblémové aktualizácie aplikácie bez potreby úplného obnovenia stránky. Vďaka tomu je proces vývoja rýchlejší a efektívnejší.

Predspracovanie CSS a integrácia PostCSS

Vite podporuje predspracovanie CSS vrátane Sass, Less a Stylus. Tiež sa integruje s PostCSS, čo umožňuje ďalšie transformácie a optimalizácie CSS.

Vite prichádza s mnohými ďalšími funkciami vrátane podpory pre TypeScript, JSX a WebAssembly. S vydaním Vite v4.0.4, komunita vývojárov Vite sa rozrástla a aktívne udržiava softvér a pridáva pravidelné nové funkcie.

Rozhranie príkazového riadka Vite (CLI)

Rozhranie príkazového riadka (CLI) Vite je praktický nástroj na prispôsobenie správania Vite. Poskytuje celý rad základných príkazov, ktoré tiež pomáhajú zefektívniť proces vývoja. Tu sú niektoré z kľúčových príkazov CLI:

vite stavať

Tento príkaz vytvorí aplikáciu pre produkčné prostredie, optimalizuje a minimalizuje kód, aby bol pripravený na nasadenie. Pomocou tohto príkazu môžete zaistiť, aby bola vaša aplikácia čo najrýchlejšia a najefektívnejšia a pripravená na distribúciu vašim používateľom.

vite náhľad

Tento príkaz vám umožňuje zobraziť ukážku vygenerovaného kódu pred jeho nasadením do produkcie. Ak chcete zabezpečiť, aby všetko vyzeralo a fungovalo podľa očakávania a nevyskytli sa žiadne zjavné problémy alebo problémy, ktoré si vyžadujú pozornosť, je to užitočný príkaz na spustenie.

vite optimalizovať

vite optimalizovať je k dispozícii vo Vite 2.6 a novších verziách, ktoré analyzujú kód projektu a generujú optimalizované produkčné zostavy pomocou stromu pretrepávanie, operácie rozdeľovania kódu a vkladanie malých aktív priamo do finálnej zostavy, aby sa znížili požiadavky potrebné na načítanie aplikácie.

vite optimalizovať sa automaticky vykoná počas vite stavať príkaz, ktorý generuje optimalizované produkčné zostavy. Môžete ho spustiť aj samostatne a skontrolovať veľkosť zostavy a výkon

Konfiguračný súbor Vite

Vo Vite konfiguračný súbor definuje rôzne možnosti procesu zostavenia. Konfiguračný súbor Vite používa JavaScript a syntax modulov ES6.

V predvolenom nastavení by ste mali pomenovať konfiguračný súbor vite.config.js a umiestnite ho do koreňového adresára projektu.

Tu sú niektoré z najčastejšie používaných možností v konfiguračnom súbore Vite:

• koreň. Určuje koreňový adresár projektu.
• server. Konfiguruje vývojový server. Zahŕňa možnosti na konfiguráciu hostiteľa, portu a proxy požiadaviek na backend API.
• pluginy. Umožňuje pridávanie doplnkov do procesu zostavovania Vite. Doplnok je funkcia, ktorá nejakým spôsobom upravuje proces zostavovania, napríklad pridáva podporu pre nový formát súboru alebo transformuje zdrojový kód.
• vyriešiť. Toto konfiguruje, ako Vite rieši importy v projekte. Zahŕňa voľby pre špecifikáciu aliasov, rozšírení a adresárov modulov.

Tu je príklad konfiguračného súboru Vite:

importovať { defineConfig } od'vite';
importovať cesta od'cesta';
exportpredvolená defineConfig({
 server: {
 port: 3000,
 OTVORENÉ: pravda,
 },
 vyriešiť: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 pluginy: [],
});

Tento konfiguračný súbor nastaví základný projekt Vite s:

• lokálny vývojový server spustený na porte 3000
• alias pre src adresár
• žiadne pluginy

Vite má silnú komunitu

Niekoľko online zdrojov veľmi podrobne vysvetľuje, ako používať Vite s populárnymi rámcami, ako sú React, Vue a Angular.

Okrem toho je v jeho oficiálnej dokumentácii množstvo informácií o efektívnom používaní Vite. S týmito dostupnými zdrojmi je možná integrácia Vite do vášho ďalšieho projektu.