Hur man ställer in en React-app med Vite

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

När man startar ett nytt React-projekt vänder sig många utvecklare till skapa-reagera-app som deras go-to-kommandoverktyg för projektinställning och konfiguration. Vite är dock ett bättre alternativ. Det ger snabbare utvecklingstider och bättre prestanda.

Vad är Vite?

Vite är ett byggverktyg och en utvecklingsserver designad för att förbättra utvecklingsprocessen för moderna webbapplikationer. Den gör detta genom att dela upp dina applikationsmoduler i beroenden och källkod. Beroenden är moduler som inte ändras ofta, medan källkoden vanligtvis redigeras ofta under utveckling.

MAKEUSE AV DAGENS VIDEO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL

Vite använder esbygga , en Go-baserad paketerare som är betydligt snabbare än traditionella JavaScript-baserade paketerare för att påskynda byggprocessen för källkoden. Den förbuntar också din applikations beroenden och serverar källkoden över inbyggd ESM, vilket gör att webbläsare kan optimera laddningen av moduler för effektivare och snabbare applikationsprestanda. När det är dags att distribuera din applikation till produktion har Vite ett inbyggt byggkommando som automatiskt optimerar din app för distribution, vilket säkerställer att din applikation körs smidigt.

Skapa ett Vite-projekt

Innan du skapar ett Vite-projekt, observera att Vite kräver Node.js version 14.18+ eller 16+. Du kan hänvisa till dessa artiklar för att installera Node på din Windows- eller Ubuntu-maskin.

Hur installera Node.js på Windows .
Lära sig hur man installerar Npm och Node.js på Ubuntu

Skapa ett Vite-projekt genom att köra det här kommandot i terminalen.

 npm create vite@latest

När kommandot börjar köras kommer du att bli tillfrågad om ett projektnamn. Skriv namnet på ditt projekt och klicka på enter.

Därefter kommer Vite att uppmana dig att välja ett ramverk. Välj Reagera.

Vite kommer också att be dig välja en variant. Välj JavaScript.

bästa gratis e -postapp för Windows 10

Terminal som visar Vite-alternativ för att skapa en React-app

När Vite är klar med byggnadsställningen för projektet, navigera i katalogen som den skapar och installera beroenden via npm.

 npm install

För att köra projektet, använd det här kommandot:

 npm run dev

Detta bör vara startsidan.

Hemsidan för en React-app skapad med Vite

Du kan börja redigera ditt projekt och dina ändringar kommer att återspeglas i webbläsaren.

Använd Vite för snabb utvecklingshastighet

CRA (create-react-app) är vanligtvis standardverktyget för att ställa in projektstrukturen och konfigurationen för en React-applikation. Det är bekvämt eftersom allt är inställt för dig, men det kan vara långsamt att bygga och ladda om under utvecklingen.

Vite, å andra sidan, använder inbyggda ES-moduler i webbläsaren för att ge snabbare byggtider. Om du inte vill använda Vite kan du välja ett React-meta-ramverk som Next.js eftersom det också är designat för att vara högpresterande.