Komme i gang med Vite: The Ultimate Build Tool

Etter hvert som nettapplikasjoner blir mer funksjonsrike, fortsetter behovet for raske og effektive byggeverktøy å øke i etterspørselen.

Vite er et moderne byggeverktøy som gir en lynrask utviklingsserver og en optimalisert byggeprosess, slik at brukerne kan strømlinjeforme arbeidsflyten og forbedre sluttbrukeropplevelsen.

Du vil utforske hvordan du starter med Vite, og dekker installasjonsprosessen, viktige funksjoner og kommandolinjegrensesnitt (CLI) kommandoer.

Initialiser et Vite-prosjekt

Før du kan bruke Vite, må du installere Node.js og Node Package Manager på systemet ditt. Etter å ha installert disse to pakkene, kan du fortsette å lage et prosjekt med Vite.

Slik initialiserer du et prosjekt med Vite ved å bruke npm:

npm init vite

Når du kjører denne kommandoen, oppretter den et nytt Vite-prosjekt i din nåværende arbeidskatalog. Kommandoen ber deg gjøre grunnleggende konfigurasjonsvalg for å sette opp ditt nye Vite-prosjekt.

Her er en oversikt over alternativene som kommandoen ber deg velge:

1. Navn på prosjektet. Når du kjører kommandoen, blir du bedt om å gi et navn for det nye prosjektet. Navnet du oppgir vil også vises i package.json fil og tjene som navnet på prosjektkatalogen.
2. Velg et rammeverk. Denne forespørselen vil be deg velge et rammeverk for prosjektet ditt. Vite støtter for tiden populære front-end-rammeverk som React, Vue, Angular og et Vanilla-alternativ for vanlig JavaScript-kode.
3. Velg en variant. Dette ber deg velge en variant for prosjektet ditt, som dekker alternativer som JavaScript og undersettspråket TypeScript.

Etter at du har oppgitt den nødvendige informasjonen, vil Vite generere en ny prosjektstruktur i din nåværende arbeidskatalog. Strukturen vil representere et grunnleggende prosjektoppsett, inkludert en package.json fil, en src katalog med en index.html og main.js fil, og en offentlig katalog.

Etter å ha opprettet prosjektstrukturen, kan du navigere til prosjektkatalogen ved å kjøre cd . Når du har gjort det, installer eventuelle ekstra avhengigheter som prosjektet ditt kan kreve ved å bruke npm installere kommando.

For å starte en utviklingsserver og overvåke eventuelle endringer i prosjektet ditt, kjører du npm kjøre dev kommandoen i prosjektterminalen din.

Funksjoner av Vite

Vites funksjoner fokuserer på å strømlinjeforme byggeprosessen og forbedre nettbyggingsopplevelsen.

Rask utviklingsserver

Vites utviklingsserver bruker native ES-moduler og lat modullasting, noe som muliggjør utrolig hastighet. Dette gir raske tilbakemeldingssløyfer og lynraske oppstartstider.

Optimalisert byggeprosess

Vite forbedret byggeprosedyren for å produsere produksjonsklar, optimert og minifisert kode. I tillegg oppretter den en manifestfil som kan bufre bust og versjonsressurser.

Støtte for ulike front-end-rammer

Vite støtter ulike front-end-rammeverk, inkludert Vue, og lignende rammeverk som React Js og Angular Js. Dette lar utviklere velge sitt foretrukne rammeverk og utnytte Vites kraftige muligheter.

Hot Module Replacement (HMR)

Vites Hot Module Replacement (HMR)-funksjon gir raske og sømløse oppdateringer til applikasjonen uten å kreve en helsideoppdatering. Dette gjør utviklingsprosessen raskere og mer effektiv.

CSS-forbehandling og PostCSS-integrasjon

Vite støtter CSS-forbehandling, inkludert Sass, Less og Stylus. Den integreres også med PostCSS, noe som gir mulighet for ytterligere transformasjoner og optimaliseringer til CSS.

Vite kommer med mange andre funksjoner, inkludert støtte for TypeScript, JSX og WebAssembly. Med utgivelsen av Vite v4.0.4, Vites utviklerfellesskap har vokst og har aktivt vedlikeholdt programvaren og lagt til vanlige nye funksjoner.

Vites kommandolinjegrensesnitt (CLI)

Vites kommandolinjegrensesnitt (CLI) er et hendig verktøy for å tilpasse Vites oppførsel. Den gir en rekke viktige kommandoer som også bidrar til å strømlinjeforme utviklingsprosessen. Her er noen av de avgjørende CLI-kommandoene:

vite bygge

Denne kommandoen vil bygge applikasjonen for et produksjonsmiljø, optimalisere og forminske koden slik at den er klar til å distribueres. Ved å bruke denne kommandoen kan du sikre at applikasjonen din er så rask og effektiv som mulig og klar for distribusjon til brukerne dine.

vite forhåndsvisning

Denne kommandoen lar deg forhåndsvise den genererte koden før du distribuerer den til produksjon. Hvis du vil sikre at alt ser ut og fungerer som forventet og det ikke er noen åpenbare problemer eller problemer som krever oppmerksomhet, er dette en nyttig kommando å kjøre.

vite optimalisere

vite optimalisere er tilgjengelig i Vite 2.6 og nyere versjoner som analyserer prosjektkode og genererer optimaliserte produksjonsbygg ved å utføre tre risting, kodedelingsoperasjoner og innebygging av små eiendeler direkte i den endelige konstruksjonen for å redusere forespørsler som trengs for å laste app.

vite optimalisere kjøres automatisk under vite bygge kommando, som genererer optimaliserte produksjonsbygg. Du kan også kjøre den separat for å sjekke byggestørrelsen og ytelsen

Vites konfigurasjonsfil

I Vite definerer konfigurasjonsfilen ulike alternativer for byggeprosessen. Vite-konfigurasjonsfilen bruker JavaScript og ES6-modulens syntaks.

Som standard bør du navngi konfigurasjonsfilen vite.config.js og plasser den i prosjektets rotkatalog.

Her er noen av de mest brukte alternativene i Vite-konfigurasjonsfilen:

• rot. Angir rotkatalogen til prosjektet.
• server. Konfigurerer utviklingsserveren. Den inkluderer alternativer for å konfigurere verts-, port- og proxy-forespørsler til en API-backend.
• plugins. Gjør det mulig å legge til plugins til Vite byggeprosessen. En plugin er en funksjon som modifiserer byggeprosessen på en eller annen måte, for eksempel å legge til støtte for et nytt filformat eller transformere kildekoden.
• Løse. Dette konfigurerer hvordan Vite løser importer i prosjektet. Den inkluderer alternativer for å spesifisere aliaser, utvidelser og modulkataloger.

Her er et eksempel på en Vite-konfigurasjonsfil:

import { defineConfig } fra'vite';
import sti fra'sti';
eksportmisligholde defineConfig({
 server: {
 havn: 3000,
 åpen: ekte,
 },
 løse: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 plugins: [],
});

Denne konfigurasjonsfilen setter opp et grunnleggende Vite-prosjekt med:

• en lokal utviklingsserver som kjører på port 3000
• et alias for src katalog
• ingen plugins

Vite har et sterkt fellesskap

Flere nettressurser forklarer i detalj hvordan du bruker Vite med populære rammeverk som React, Vue og Angular.

I tillegg er det et vell av informasjon om effektiv bruk av Vite i den offisielle dokumentasjonen. Med disse ressursene tilgjengelig, er det mulig å integrere Vite i ditt neste prosjekt.