Bygg dina komplexa webbappar på kortare tid, med en snabbare återkopplingsslinga, med Vite.

När webbapplikationer blir mer funktionsrika, fortsätter behovet av snabba och effektiva byggverktyg att växa i efterfrågan.

Vite är ett modernt byggverktyg som ger en blixtsnabb utvecklingsserver och en optimerad byggprocess, vilket gör att användarna kan effektivisera sitt arbetsflöde och förbättra slutanvändarupplevelsen.

Du kommer att utforska hur du börjar med Vite, och täcker dess installationsprocess, viktiga funktioner och kommandoradsgränssnitt (CLI).

Initiera ett Vite-projekt

Innan du kan använda Vite, måste du installera Node.js och Node Package Manager på ditt system. Efter att ha installerat dessa två paket kan du sedan fortsätta att skapa ett projekt med Vite.

Så här initierar du ett projekt med Vite med npm:

npm init vite

När du kör det här kommandot skapar det ett nytt Vite-projekt i din nuvarande arbetskatalog. Kommandot uppmanar dig att göra grundläggande konfigurationsval för att ställa in ditt nya Vite-projekt.

instagram viewer

Här är en uppdelning av alternativen som kommandot uppmanar dig att välja:

  1. Projektets namn. När du kör kommandot uppmanas du att ange ett namn för ditt nya projekt. Namnet du anger kommer också att visas i package.json fil och fungera som namnet på din projektkatalog.
  2. Välj ett ramverk. Den här uppmaningen kommer att be dig välja ett ramverk för ditt projekt. Vite stöder för närvarande populära front-end-ramverk som React, Vue, Angular och ett Vanilla-alternativ för vanlig JavaScript-kod.
  3. Välj en variant. Detta uppmanar dig att välja en variant för ditt projekt, som täcker alternativ som JavaScript och dess undergruppsspråk TypeScript.

När du har tillhandahållit den nödvändiga informationen kommer Vite att generera en ny projektstruktur i din nuvarande arbetskatalog. Strukturen kommer att representera en grundläggande projektuppsättning, inklusive en package.json fil, a src katalog med en index.html och main.js fil och en offentlig katalog.

Efter att ha skapat projektstrukturen kan du navigera till projektkatalogen genom att köra CD . När du har gjort det installerar du eventuella ytterligare beroenden som ditt projekt kan kräva med hjälp av npm installera kommando.

För att starta en utvecklingsserver och övervaka eventuella ändringar som görs i ditt projekt kommer du att köra npm kör dev kommandot i din projektterminal.

Funktioner hos Vite

Vites funktioner fokuserar på att effektivisera byggprocessen och förbättra webbbyggandet.

Snabb utvecklingsserver

Vites utvecklingsserver använder inbyggda ES-moduler och lat modulladdning, vilket möjliggör otrolig hastighet. Detta möjliggör snabba återkopplingsslingor och blixtsnabba starttider.

Optimerad byggprocess

Vite förbättrade sin byggprocedur för att producera produktionsklar, optimerad och minifierad kod. Dessutom skapar den en manifestfil som kan cache-bust och versionstillgångar.

Stöd för olika front-end-ramverk

Vite stöder olika front-end-ramverk, inklusive Vue och liknande ramverk som React Js och Angular Js. Detta gör att utvecklare kan välja sitt föredragna ramverk och utnyttja Vites kraftfulla kapacitet.

Hot Module Replacement (HMR)

Vites Hot Module Replacement-funktion (HMR) möjliggör snabba och sömlösa uppdateringar av applikationen utan att behöva uppdatera hela sidan. Detta gör utvecklingsprocessen snabbare och mer effektiv.

CSS-förbearbetning och PostCSS-integration

Vite stöder CSS-förbearbetning, inklusive Sass, Less och Stylus. Den integreras också med PostCSS, vilket möjliggör ytterligare transformationer och optimeringar av CSS.

Vite kommer med många andra funktioner, inklusive stöd för TypeScript, JSX och WebAssembly. Med lanseringen av Vite v4.0.4, Vites utvecklargemenskap har vuxit och har aktivt underhållit programvaran och lagt till regelbundna nya funktioner.

Vites kommandoradsgränssnitt (CLI)

Vites kommandoradsgränssnitt (CLI) är ett praktiskt verktyg för att anpassa Vites beteende. Den tillhandahåller en rad viktiga kommandon som också hjälper till att effektivisera utvecklingsprocessen. Här är några av de avgörande CLI-kommandona:

vite bygga

Detta kommando kommer att bygga applikationen för en produktionsmiljö, optimera och förminska koden så att den är redo att distribueras. Med detta kommando kan du se till att din applikation är så snabb och effektiv som möjligt och redo att distribueras till dina användare.

vite förhandsvisning

Detta kommando låter dig förhandsgranska den genererade koden innan du distribuerar den till produktion. Om du vill säkerställa att allt ser ut och fungerar som förväntat och det inte finns några uppenbara problem eller problem som kräver uppmärksamhet, är detta ett användbart kommando att köra.

vite optimera

vite optimera är tillgänglig i Vite 2.6 och senare versioner som analyserar projektkod och genererar optimerade produktionsbyggen genom att utföra träd skakning, koddelningsoperationer och inbäddning av små tillgångar direkt i den slutliga builden för att minska antalet förfrågningar som behövs för att ladda app.

vite optimera körs automatiskt under vite bygga kommando, som genererar optimerade produktionsbyggnader. Du kan också köra den separat för att kontrollera byggstorlek och prestanda

Vites konfigurationsfil

I Vite definierar konfigurationsfilen olika alternativ för byggprocessen. Vite-konfigurationsfilen använder JavaScript och ES6-modulernas syntax.

Som standard bör du namnge din konfigurationsfil vite.config.js och placera den i projektets rotkatalog.

Här är några av de vanligaste alternativen i Vite-konfigurationsfilen:

  • rot. Anger rotkatalogen för projektet.
  • server. Konfigurerar utvecklingsservern. Den innehåller alternativ för att konfigurera värd-, port- och proxyförfrågningar till en API-backend.
  • plugins. Tillåter att lägga till plugins till Vite-byggprocessen. En plugin är en funktion som modifierar byggprocessen på något sätt, som att lägga till stöd för ett nytt filformat eller transformera källkod.
  • lösa. Detta konfigurerar hur Vite löser importer i projektet. Den innehåller alternativ för att ange alias, tillägg och modulkataloger.

Här är ett exempel på en Vite-konfigurationsfil:

importera { defineConfig } från'vite';
importera väg från'väg';
exporterastandard defineConfig({
 server: {
 hamn: 3000,
 öppen: Sann,
 },
 lösa: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 plugins: [],
});

Den här konfigurationsfilen ställer in ett grundläggande Vite-projekt med:

  • en lokal utvecklingsserver som körs på port 3000
  • ett alias för src katalog
  • inga plugins

Vite har en stark gemenskap

Flera onlineresurser förklarar i detalj hur man använder Vite med populära ramverk som React, Vue och Angular.

Dessutom finns det en mängd information om att använda Vite effektivt i dess officiella dokumentation. Med dessa resurser tillgängliga är det möjligt att integrera Vite i ditt nästa projekt.