Kom godt i gang med Vite: Det ultimative byggeværktøj

Efterhånden som webapplikationer bliver mere funktionelle, fortsætter behovet for hurtige og effektive byggeværktøjer med at vokse i efterspørgsel.

Vite er et moderne byggeværktøj, der giver en lynhurtig udviklingsserver og en optimeret byggeproces, der giver brugerne mulighed for at strømline deres arbejdsgang og forbedre slutbrugeroplevelsen.

Du vil undersøge, hvordan du starter med Vite, og dækker dets installationsproces, væsentlige funktioner og kommandolinjegrænseflade (CLI) kommandoer.

Initialiser et Vite-projekt

Før du kan bruge Vite, skal du installere Node.js og Node Package Manager på dit system. Efter at have installeret disse to pakker, kan du fortsætte med at oprette et projekt med Vite.

Sådan initialiserer du et projekt med Vite ved hjælp af npm:

npm init vite

Når du kører denne kommando, opretter den et nyt Vite-projekt i din nuværende arbejdsmappe. Kommandoen beder dig om at foretage grundlæggende konfigurationsvalg for at konfigurere dit nye Vite-projekt.

Her er en oversigt over de muligheder, som kommandoen beder dig om at vælge:

1. Projektets navn. Når du kører kommandoen, bliver du bedt om at angive et navn til dit nye projekt. Det navn, du angiver, vises også i package.json fil og tjene som navnet på din projektmappe.
2. Vælg en ramme. Denne prompt vil bede dig om at vælge en ramme for dit projekt. Vite understøtter i øjeblikket populære front-end-frameworks som React, Vue, Angular og en Vanilla-mulighed for almindelig JavaScript-kode.
3. Vælg en variant. Dette beder dig om at vælge en variant til dit projekt, der dækker alternativer som JavaScript og dets undersætsprog TypeScript.

Når du har angivet de nødvendige oplysninger, vil Vite generere en ny projektstruktur i din nuværende arbejdsmappe. Strukturen vil repræsentere en grundlæggende projektopsætning, herunder en package.json fil, en src mappe med en index.html og main.js fil, og en offentlig vejviser.

Efter oprettelse af projektstrukturen kan du navigere til projektbiblioteket ved at køre cd . Når du har gjort det, skal du installere eventuelle yderligere afhængigheder, som dit projekt kan kræve ved hjælp af npm installere kommando.

For at starte en udviklingsserver og overvåge eventuelle ændringer i dit projekt, skal du køre npm køre dev kommando i din projektterminal.

Funktioner af Vite

Vites funktioner fokuserer på at strømline byggeprocessen og forbedre webbuildingsoplevelsen.

Hurtig udviklingsserver

Vites udviklingsserver bruger native ES-moduler og doven modulindlæsning, hvilket muliggør en utrolig hastighed. Dette giver mulighed for hurtige feedback-loops og lynhurtige opstartstider.

Optimeret byggeproces

Vite forbedrede sin byggeprocedure for at producere produktionsklar, optimeret og minificeret kode. Derudover opretter det en manifestfil, der kan cache bust og versionsaktiver.

Support til forskellige front-end-rammer

Vite understøtter forskellige front-end-frameworks, herunder Vue og lignende rammer som React Js og Angular Js. Dette giver udviklere mulighed for at vælge deres foretrukne rammer og udnytte Vites kraftfulde muligheder.

Hot Module Replacement (HMR)

Vites Hot Module Replacement-funktion (HMR) giver mulighed for hurtige og problemfri opdateringer af applikationen uden at kræve en helsideopdatering. Dette gør udviklingsprocessen hurtigere og mere effektiv.

CSS-forbehandling og PostCSS-integration

Vite understøtter CSS-forbehandling, inklusive Sass, Less og Stylus. Det integrerer også med PostCSS, hvilket giver mulighed for yderligere transformationer og optimeringer til CSS.

Vite kommer med mange andre funktioner, herunder understøttelse af TypeScript, JSX og WebAssembly. Med udgivelsen af ​​Vite v4.0.4, Vites udviklerfællesskab er vokset og har aktivt vedligeholdt softwaren og tilføjet regelmæssige nye funktioner.

Vites kommandolinjegrænseflade (CLI)

Vites Command Line Interface (CLI) er et praktisk værktøj til at tilpasse Vites adfærd. Det giver en række vigtige kommandoer, der også hjælper med at strømline udviklingsprocessen. Her er nogle af de afgørende CLI-kommandoer:

vite bygge

Denne kommando vil bygge applikationen til et produktionsmiljø, optimere og formindske koden, så den er klar til at blive implementeret. Ved at bruge denne kommando kan du sikre, at din applikation er så hurtig og effektiv som muligt og klar til distribution til dine brugere.

vite forhåndsvisning

Denne kommando giver dig mulighed for at få vist den genererede kode, før du implementerer den til produktion. Hvis du vil sikre dig, at alt ser ud og fungerer som forventet, og der ikke er nogen synlige problemer eller problemer, der kræver opmærksomhed, er dette en nyttig kommando at køre.

vite optimere

vite optimere er tilgængelig i Vite 2.6 og nyere versioner, der analyserer projektkode og genererer optimerede produktionsbygninger ved at udføre træ rystning, kodeopdelingsoperationer og indlejring af små aktiver direkte i den endelige build for at reducere de anmodninger, der er nødvendige for at indlæse app.

vite optimere udføres automatisk under vite bygge kommando, som genererer optimerede produktionsbygninger. Du kan også køre det separat for at kontrollere byggestørrelsen og ydeevnen

Vites konfigurationsfil

I Vite definerer konfigurationsfilen forskellige muligheder for byggeprocessen. Vite-konfigurationsfilen bruger JavaScript og ES6-modulernes syntaks.

Som standard skal du navngive din konfigurationsfil vite.config.js og placer den i projektets rodmappe.

Her er nogle af de mest brugte muligheder i Vite-konfigurationsfilen:

• rod. Specificerer rodmappen for projektet.
• server. Konfigurerer udviklingsserveren. Det inkluderer muligheder for at konfigurere værts-, port- og proxy-anmodninger til en API-backend.
• plugins. Giver mulighed for at tilføje plugins til Vite byggeprocessen. Et plugin er en funktion, der ændrer byggeprocessen på en eller anden måde, såsom at tilføje understøttelse af et nyt filformat eller transformere kildekode.
• beslutte. Dette konfigurerer, hvordan Vite løser importer i projektet. Det inkluderer muligheder for at angive aliaser, udvidelser og modulmapper.

Her er et eksempel på en Vite-konfigurationsfil:

importere { defineConfig } fra'vite';
importere sti fra'sti';
eksportStandard defineConfig({
 server: {
 Havn: 3000,
 åben: rigtigt,
 },
 beslutte: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 plugins: [],
});

Denne konfigurationsfil opsætter et grundlæggende Vite-projekt med:

• en lokal udviklingsserver, der kører på port 3000
• et alias for src vejviser
• ingen plugins

Vite har et stærkt fællesskab

Adskillige onlineressourcer forklarer meget detaljeret, hvordan man bruger Vite med populære rammer som React, Vue og Angular.

Derudover er der et væld af oplysninger om effektiv brug af Vite i dens officielle dokumentation. Med disse tilgængelige ressourcer er det muligt at integrere Vite i dit næste projekt.