Vite'iga alustamine: ülim ehitustööriist

Kuna veebirakendused muutuvad funktsioonirikkamaks, kasvab nõudlus kiirete ja tõhusate ehitustööriistade järele.

Vite on kaasaegne ehitustööriist, mis pakub välkkiire arendusserverit ja optimeeritud koostamisprotsessi, võimaldades kasutajatel oma töövoogu sujuvamaks muuta ja lõppkasutaja kogemust parandada.

Uurite, kuidas Vite'iga alustada, käsitledes selle installiprotsessi, olulisi funktsioone ja käsurea liidese (CLI) käske.

Käivitage Vite projekt

Enne kui saate kasutada Vite, peate installima Node.js ja Node Package Manager teie süsteemis. Pärast nende kahe paketi installimist saate jätkata Vite'iga projekti loomist.

Siin on, kuidas projekti npm abil Vite'iga lähtestada:

npm init vite

Selle käsu käivitamisel loob see teie praeguses töökataloogis uue Vite projekti. Käsk palub teil teha oma uue Vite projekti seadistamiseks põhilised konfiguratsioonivalikud.

Siin on valikute jaotus, mille käsk palub teil valida:

1. Projekti nimi. Kui käivitate käsu, palub see teil anda uuele projektile nimi. Teie sisestatud nimi kuvatakse ka package.json faili ja see on teie projekti kataloogi nimi.
2. Valige raamistik. See viip palub teil valida oma projekti jaoks raamistiku. Vite toetab praegu populaarseid esiotsa raamistikke, nagu React, Vue, Angular ja Vanilla suvand tavalise JavaScripti koodi jaoks.
3. Valige variant. See palub teil valida oma projekti jaoks variandi, mis hõlmab selliseid alternatiive nagu JavaScript ja selle alamhulga keel TypeScript.

Pärast vajaliku teabe esitamist loob Vite teie praeguses töökataloogis uue projektistruktuuri. Struktuur esindab põhiprojekti seadistust, sealhulgas a package.json fail, a src kataloog koos an index.html ja main.js fail ja a avalik kataloog.

Pärast projekti struktuuri loomist saate käivitades liikuda projekti kataloogi cd . Kui olete seda teinud, installige kõik täiendavad sõltuvused, mida teie projekt võib nõuda, kasutades rakendust npm installimine käsk.

Arendusserveri käivitamiseks ja projektis tehtud muudatuste jälgimiseks käivitage npm käivita dev käsk oma projekti terminalis.

Vite omadused

Vite funktsioonid keskenduvad koostamise protsessi sujuvamaks muutmisele ja veebi koostamiskogemuse täiustamisele.

Kiire arendusserver

Vite arendusserver kasutab natiivseid ES-mooduleid ja laiska moodulite laadimist, võimaldades uskumatut kiirust. See võimaldab kiireid tagasisideahelaid ja välkkiire käivitusaegu.

Optimeeritud ehitusprotsess

Vite täiustas oma koostamisprotseduuri, et toota tootmisvalmis, optimeeritud ja minimeeritud koodi. Lisaks loob see manifestifaili, mis võib vahemällu salvestada büsti- ja versioonivarad.

Erinevate esiotsa raamistike tugi

Vite toetab erinevaid esiotsa raamistikke, sealhulgas Vue ja sarnased raamistikud nagu React Js ja Angular Js. See võimaldab arendajatel valida oma eelistatud raamistiku ja kasutada Vite võimsaid võimalusi.

Kuuma mooduli vahetus (HMR)

Vite's Hot Module Replacement (HMR) funktsioon võimaldab rakendust kiiresti ja sujuvalt värskendada, ilma et oleks vaja kogu lehekülge värskendada. See muudab arendusprotsessi kiiremaks ja tõhusamaks.

CSS-i eeltöötlus ja postCSS-i integreerimine

Vite toetab CSS-i eeltöötlust, sealhulgas Sass, Less ja Stylus. See integreerub ka PostCSS-iga, võimaldades CSS-i täiendavaid teisendusi ja optimeerimisi.

Vite'il on palju muid funktsioone, sealhulgas TypeScripti, JSX-i ja WebAssembly tugi. Vite v4.0.4 väljalaskmisega, Vite arendajate kogukond on kasvanud ja on tarkvara aktiivselt hooldanud, lisades regulaarselt uusi funktsioone.

Vite käsurea liides (CLI)

Vite käsurea liides (CLI) on mugav tööriist Vite käitumise kohandamiseks. See pakub mitmeid olulisi käske, mis aitavad samuti arendusprotsessi sujuvamaks muuta. Siin on mõned olulised CLI käsud:

vite ehitada

See käsk loob rakenduse tootmiskeskkonna jaoks, optimeerides ja minimeerides koodi, et see oleks juurutamiseks valmis. Selle käsu abil saate tagada, et teie rakendus on võimalikult kiire ja tõhus ning valmis kasutajatele levitamiseks.

vite eelvaade

See käsk võimaldab teil vaadata loodud koodi eelvaadet enne selle tootmisse juurutamist. Kui soovite tagada, et kõik näeks välja ja toimiks ootuspäraselt ning ei esine nähtavaid probleeme või probleeme, mis nõuavad tähelepanu, on see kasulik käsk.

vite optimeerida

vite optimeerida on saadaval Vite 2.6 ja uuemates versioonides, mis analüüsivad projekti koodi ja loovad optimeeritud tootmisversioone puu abil raputamine, koodi jagamise toimingud ja väikeste varade manustamine otse lõppjärgusse, et vähendada rakenduse laadimiseks vajalikke taotlusi. rakendus.

vite optimeerida käivitub automaatselt vite ehitada käsk, mis genereerib optimeeritud tootmisversioone. Järje suuruse ja jõudluse kontrollimiseks saate seda ka eraldi käivitada

Vite konfiguratsioonifail

Vite'is määratleb konfiguratsioonifail ehitusprotsessi jaoks erinevad valikud. Vite konfiguratsioonifail kasutab JavaScripti ja ES6 moodulite süntaksit.

Vaikimisi peaksite oma konfiguratsioonifailile nime panema vite.config.js ja asetage see projekti juurkataloogi.

Siin on mõned Vite konfiguratsioonifailis kõige sagedamini kasutatavad valikud:

• juur. Määrab projekti juurkataloogi.
• server. Seadistab arendusserveri. See sisaldab suvandeid hosti, pordi ja API taustaprogrammi puhverserveri taotluste konfigureerimiseks.
• pistikprogrammid. Võimaldab lisada Vite ehitusprotsessi pistikprogramme. Pistikprogramm on funktsioon, mis muudab ehitusprotsessi mingil viisil, näiteks lisab uue failivormingu toe või muudab lähtekoodi.
• lahendada. See konfigureerib, kuidas Vite lahendab projekti importimise. See sisaldab valikuid varjunimede, laienduste ja moodulikataloogide määramiseks.

Siin on näide Vite konfiguratsioonifailist:

importida { defineConfig } alates'vite';
importida tee alates'tee';
eksportidavaikimisi defineConfig({
 server: {
 port: 3000,
 avatud: tõsi,
 },
 lahenda: {
 teise nimega: {
'@': path.resolve (__dirname, './src'),
 },
 },
 pluginad: [],
});

See konfiguratsioonifail seadistab Vite'i põhiprojekti koos:

• pordis töötav kohalik arendusserver 3000
• pseudonüüm src kataloog
• pole pluginaid

Vitel on tugev kogukond

Mitmed veebiressursid selgitavad üksikasjalikult, kuidas Vite'i kasutada selliste populaarsete raamistikega nagu React, Vue ja Angular.

Lisaks on selle ametlikus dokumentatsioonis palju teavet Vite tõhusa kasutamise kohta. Nende saadaolevate ressurssidega on Vite'i integreerimine oma järgmisesse projekti võimalik.