Ali še vedno uporabljate create-react-app za nastavitev svojega projekta React? Preklopite na Vite za boljše delovanje in hitrejši razvoj.

Ko začnejo nov projekt React, se mnogi razvijalci obrnejo na create-react-aplikacija kot njihovo glavno ukazno orodje za nastavitev in konfiguracijo projekta. Vendar je Vite boljša alternativa. Ponuja hitrejše razvojne čase in boljše delovanje.

Kaj je Vite?

Vite je orodje za gradnjo in razvojni strežnik, zasnovan za izboljšanje razvojnega procesa sodobnih spletnih aplikacij. To naredi tako, da module vaše aplikacije razdeli na odvisnosti in izvorno kodo. Odvisnosti so moduli, ki se ne spreminjajo pogosto, medtem ko se izvorna koda običajno pogosto ureja med razvojem.

Vite uporablja esbuild, povezovalnik, ki temelji na Go in je bistveno hitrejši od tradicionalnih povezovalnikov, ki temeljijo na JavaScriptu, da pospeši postopek gradnje izvorne kode. Prav tako vnaprej združi odvisnosti vaše aplikacije in služi izvorni kodi preko izvornega ESM, omogoča brskalnikom, da optimizirajo nalaganje modulov za učinkovitejšo in hitrejšo uporabo izvedba. Ko pride čas za uvedbo vaše aplikacije v produkcijo, ima Vite vgrajen ukaz za gradnjo, ki samodejno optimizira vašo aplikacijo za uvajanje in zagotavlja nemoteno delovanje vaše aplikacije.

Ustvarjanje projekta Vite

Preden ustvarite projekt Vite, upoštevajte, da Vite zahteva različico Node.js 14.18+ ali 16+. Če želite namestiti Node na vaš računalnik z operacijskim sistemom Windows ali Ubuntu, si oglejte te članke.

  • Kako namestite Node.js v sistem Windows.
  • Naučite se kako namestiti Npm in Node.js na Ubuntu

Ustvarite projekt Vite tako, da zaženete ta ukaz v terminalu.

npm ustvari vite@najnovejše

Ko se ukaz začne izvajati, boste pozvani k vnosu imena projekta. Vnesite ime svojega projekta in kliknite enter.

Nato vas bo Vite pozval, da izberete okvir. Izberite React.

Vite vas bo tudi pozval, da izberete različico. Izberite JavaScript.

Ko Vite dokonča gradnjo projekta, se pomaknite po imeniku, ki ga ustvari, in namestite odvisnosti prek npm.

namestitev npm

Za zagon projekta uporabite ta ukaz:

npm run dev

To bi morala biti domača stran.

Lahko začnete urejati svoj projekt in vaše spremembe se bodo odražale v brskalniku.

Uporabite Vite za hitro razvojno hitrost

CRA (create-react-app) je običajno privzeto orodje za nastavitev strukture projekta in konfiguracije za aplikacijo React. Priročno je, saj je vse nastavljeno za vas, vendar je lahko gradnja in ponovno nalaganje med razvojem počasno.

Vite po drugi strani uporablja izvorne module ES v brskalniku, da zagotovi hitrejše čase gradnje. Če ne želite uporabljati Vite, se lahko odločite za meta ogrodje React, kot je Next.js, saj je zasnovano tako, da je zelo zmogljivo.