Viten käytön aloittaminen: Ultimate Build Tool

Kun verkkosovelluksista tulee entistä monipuolisempia, nopeiden ja tehokkaiden rakennustyökalujen kysyntä kasvaa jatkuvasti.

Vite on moderni rakennustyökalu, joka tarjoaa salamannopean kehityspalvelimen ja optimoidun rakennusprosessin, jonka avulla käyttäjät voivat virtaviivaistaa työnkulkuaan ja parantaa loppukäyttäjäkokemusta.

Tutustut Viten käytön aloittamiseen, kattaen sen asennusprosessin, keskeiset ominaisuudet ja Command Line Interface (CLI) -komennot.

Alusta Vite-projekti

Ennen kuin voit käyttää Vite, sinun on asennettava Node.js ja Node Package Manager järjestelmässäsi. Kun olet asentanut nämä kaksi pakettia, voit jatkaa projektin luomista Viten kanssa.

Näin alustat projekti Viten kanssa npm: n avulla:

npm init vite

Kun suoritat tämän komennon, se luo uuden Vite-projektin nykyiseen työhakemistoosi. Komento kehottaa sinua tekemään perustavanlaatuisia kokoonpanovalintoja uuden Vite-projektin määrittämiseksi.

Tässä on erittely vaihtoehdoista, jotka komento kehottaa sinua valitsemaan:

1. Projektin nimi. Kun suoritat komennon, se kehottaa antamaan nimen uudelle projektillesi. Antamasi nimi näkyy myös package.json tiedosto ja toimii projektihakemistosi nimenä.
2. Valitse kehys. Tämä kehote pyytää sinua valitsemaan kehyksen projektillesi. Vite tukee tällä hetkellä suosittuja käyttöliittymäkehyksiä, kuten React, Vue, Angular ja Vanilla-vaihtoehtoa tavalliselle JavaScript-koodille.
3. Valitse Variantti. Tämä kehottaa sinua valitsemaan vaihtoehdon projektillesi, joka kattaa vaihtoehdot, kuten JavaScript ja sen osajoukkokieli TypeScript.

Kun olet antanut tarvittavat tiedot, Vite luo uuden projektirakenteen nykyiseen työhakemistoosi. Rakenne edustaa projektin peruskokoonpanoa, mukaan lukien a package.json tiedosto, a src hakemisto, jossa on index.html ja main.js tiedosto ja a julkinen hakemistosta.

Kun olet luonut projektirakenteen, voit siirtyä projektihakemistoon suorittamalla CD . Kun olet tehnyt niin, asenna mahdolliset lisäriippuvuudet, joita projektisi saattaa vaatia käyttämällä npm asennus komento.

Voit käynnistää kehityspalvelimen ja seurata projektiisi tehtyjä muutoksia suorittamalla npm run dev komento projektipäätteessäsi.

Viten ominaisuudet

Viten ominaisuudet keskittyvät rakennusprosessin virtaviivaistamiseen ja verkkorakennuskokemuksen parantamiseen.

Nopea kehityspalvelin

Viten kehityspalvelin hyödyntää alkuperäisiä ES-moduuleja ja laiska moduulilataus mahdollistaen uskomattoman nopeuden. Tämä mahdollistaa nopeat takaisinkytkentäsilmukat ja salamannopeat käynnistysajat.

Optimoitu rakennusprosessi

Vite paransi rakennusprosessiaan tuottaakseen tuotantovalmiutta, optimoitua ja minimoitua koodia. Lisäksi se luo luettelotiedoston, joka voi tallentaa kopio- ja versioresurssit välimuistiin.

Tuki erilaisille käyttöliittymäkehyksille

Vite tukee erilaisia ​​etupään kehyksiä, mukaan lukien Vue ja samanlaiset puitteet, kuten React Js ja Angular Js. Näin kehittäjät voivat valita haluamansa kehyksen ja hyödyntää Viten tehokkaita ominaisuuksia.

Hot Module Replacement (HMR)

Viten Hot Module Replacement (HMR) -ominaisuus mahdollistaa nopeat ja saumattomat päivitykset sovellukseen ilman koko sivun päivittämistä. Tämä tekee kehitysprosessista nopeamman ja tehokkaamman.

CSS-esikäsittely ja postCSS-integrointi

Vite tukee CSS-esikäsittelyä, mukaan lukien Sass, Less ja Stylus. Se integroituu myös PostCSS: ään, mikä mahdollistaa lisämuunnoksia ja optimointeja CSS: ään.

Vite sisältää monia muita ominaisuuksia, kuten TypeScript-, JSX- ja WebAssembly-tuen. Vite v4.0.4:n julkaisun myötä, Viten kehittäjäyhteisö on kasvanut ja on aktiivisesti ylläpitänyt ohjelmistoa ja lisännyt säännöllisesti uusia ominaisuuksia.

Viten komentoriviliittymä (CLI)

Viten Command Line Interface (CLI) on kätevä työkalu Viten toiminnan mukauttamiseen. Se tarjoaa joukon tärkeitä komentoja, jotka myös auttavat virtaviivaistamaan kehitysprosessia. Tässä on joitain tärkeitä CLI-komentoja:

vite rakentaa

Tämä komento rakentaa sovelluksen tuotantoympäristöön optimoimalla ja minimoimalla koodin, jotta se on valmis käyttöönotettavaksi. Tämän komennon avulla voit varmistaa, että sovelluksesi on mahdollisimman nopea ja tehokas ja valmis jaettavaksi käyttäjillesi.

vite esikatselu

Tämän komennon avulla voit esikatsella luotua koodia ennen sen käyttöönottoa tuotantoon. Jos haluat varmistaa, että kaikki näyttää ja toimii odotetusti eikä ilmeisiä ongelmia tai ongelmia, jotka vaativat huomiota, tämä on hyödyllinen komento.

vite optimoida

vite optimoida on saatavana Vite 2.6:ssa ja uudemmissa versioissa, jotka analysoivat projektikoodia ja luovat optimoituja tuotantokoontiversioita puun avulla ravistelu, koodin jakaminen ja pienten resurssien upottaminen suoraan lopulliseen koontiversioon vähentääksesi pyynnön lataamista. sovellus.

vite optimoida suoritetaan automaattisesti aikana vite rakentaa komento, joka luo optimoidut tuotantokoonnukset. Voit myös suorittaa sen erikseen tarkistaaksesi koon ja suorituskyvyn

Viten määritystiedosto

Vitessä konfiguraatiotiedosto määrittelee erilaisia ​​vaihtoehtoja rakennusprosessille. Vite-määritystiedosto käyttää JavaScriptiä ja ES6-moduulien syntaksia.

Oletusarvoisesti sinun tulee nimetä asetustiedosto vite.config.js ja sijoita se projektin juurihakemistoon.

Tässä on joitain Vite-määritystiedoston yleisimmin käytetyistä vaihtoehdoista:

• juuri. Määrittää projektin juurihakemiston.
• palvelin. Määrittää kehityspalvelimen. Se sisältää asetukset isäntä-, portti- ja välityspalvelinpyyntöjen määrittämiseksi API-taustajärjestelmään.
• laajennuksia. Mahdollistaa laajennuksien lisäämisen Viten rakennusprosessiin. Plugin on toiminto, joka muuttaa rakennusprosessia jollakin tavalla, kuten lisäämällä tuen uudelle tiedostomuodolle tai muuttamalla lähdekoodia.
• ratkaista. Tämä määrittää, kuinka Vite ratkaisee tuonnit projektissa. Se sisältää vaihtoehtoja aliasten, laajennuksien ja moduulihakemistojen määrittämiseen.

Tässä on esimerkki Viten konfiguraatiotiedostosta:

tuonti { defineConfig } alkaen"vite";
tuonti polku alkaen'polku';
viedäoletuksena defineConfig({
 palvelin: {
 portti: 3000,
 avata: totta,
 },
 ratkaista: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 laajennukset: [],
});

Tämä asetustiedosto määrittää Vite-perusprojektin, jossa on:

• portissa toimiva paikallinen kehityspalvelin 3000
• alias kohteelle src hakemistosta
• ei liitännäisiä

Vitellä on vahva yhteisö

Useat verkkoresurssit selittävät yksityiskohtaisesti, kuinka Vitea käytetään suosittujen kehysten, kuten React, Vue ja Angular, kanssa.

Lisäksi sen virallisessa dokumentaatiossa on runsaasti tietoa Viten tehokkaasta käytöstä. Näiden käytettävissä olevien resurssien ansiosta Viten integrointi seuraavaan projektiisi on mahdollista.