Darba sākšana ar Vite: Ultimate Build Tool

Tīmekļa lietojumprogrammām kļūstot ar funkcijām bagātākai, pieprasījums pēc ātriem un efektīviem veidošanas rīkiem turpina pieaugt.

Vite ir moderns veidošanas rīks, kas nodrošina zibenīgi ātru izstrādes serveri un optimizētu veidošanas procesu, ļaujot lietotājiem racionalizēt savu darbplūsmu un uzlabot galalietotāja pieredzi.

Jūs izpētīsit, kā sākt darbu ar Vite, aptverot tā instalēšanas procesu, būtiskās funkcijas un komandrindas interfeisa (CLI) komandas.

Inicializējiet Vite projektu

Pirms varat lietot Vite, jums ir jāinstalē Node.js un Node Package Manager jūsu sistēmā. Pēc šo divu pakotņu instalēšanas varat turpināt projekta izveidi ar Vite.

Lūk, kā inicializēt projektu ar Vite, izmantojot npm:

npm init vite

Palaižot šo komandu, tā izveido jaunu Vite projektu jūsu pašreizējā darba direktorijā. Komanda liek jums veikt pamata konfigurācijas izvēles, lai iestatītu savu jauno Vite projektu.

Tālāk ir sniegts to opciju sadalījums, kuras komanda aicina atlasīt:

1. Projekta nosaukums. Palaižot komandu, tā liks jums norādīt sava jaunā projekta nosaukumu. Jūsu norādītais vārds tiks parādīts arī pack.json failu un kalpo kā jūsu projekta direktorijas nosaukums.
2. Izvēlieties ietvaru. Šī uzvedne lūgs jums izvēlēties ietvaru savam projektam. Vite pašlaik atbalsta tādas populāras priekšgala sistēmas kā React, Vue, Angular un Vanilla opciju vienkāršam JavaScript kodam.
3. Izvēlieties variantu. Tas liks jums izvēlēties variantu savam projektam, aptverot tādas alternatīvas kā JavaScript un tās apakškopas valoda TypeScript.

Pēc nepieciešamās informācijas sniegšanas Vite jūsu pašreizējā darba direktorijā ģenerēs jaunu projekta struktūru. Struktūra atspoguļos pamata projekta iestatījumus, tostarp a pack.json fails, a src direktorijā ar index.html un galvenais.js fails un a publiski direktoriju.

Pēc projekta struktūras izveides, palaižot, varat pāriet uz projekta direktoriju cd . Kad tas ir izdarīts, instalējiet visas papildu atkarības, kas var būt nepieciešamas jūsu projektam, izmantojot npm instalēšana komandu.

Lai palaistu izstrādes serveri un pārraudzītu visas projektā veiktās izmaiņas, palaidiet npm palaist dev komanda projekta terminālī.

Vites iezīmes

Vite funkcijas ir vērstas uz veidošanas procesa racionalizēšanu un tīmekļa veidošanas pieredzes uzlabošanu.

Ātrās attīstības serveris

Vites izstrādes serveris izmanto vietējos ES moduļus un slinko moduļu ielādi, nodrošinot neticamu ātrumu. Tas nodrošina ātru atgriezenisko saiti un zibenīgu palaišanas laiku.

Optimizēts veidošanas process

Vite uzlaboja savu veidošanas procedūru, lai izveidotu ražošanai gatavu, optimizētu un samazinātu kodu. Turklāt tas izveido manifesta failu, kas var kešatmiņā saglabāt kopas un versiju līdzekļus.

Atbalsts dažādiem priekšgala ietvariem

Vite atbalsta dažādus priekšgala ietvarus, tostarp Vue un līdzīgas sistēmas, piemēram, React Js un Angular Js. Tas ļauj izstrādātājiem izvēlēties sev vēlamo sistēmu un izmantot Vite jaudīgās iespējas.

Karstā moduļa nomaiņa (HMR)

Vites Hot Module Replacement (HMR) funkcija ļauj ātri un netraucēti atjaunināt lietojumprogrammu, neprasot pilnas lapas atsvaidzināšanu. Tas padara izstrādes procesu ātrāku un efektīvāku.

CSS priekšapstrāde un pēcCSS integrācija

Vite atbalsta CSS priekšapstrādi, tostarp Sass, Less un Stylus. Tas arī integrējas ar PostCSS, ļaujot veikt papildu transformācijas un optimizācijas CSS.

Vite ir aprīkots ar daudzām citām funkcijām, tostarp atbalstu TypeScript, JSX un WebAssembly. Līdz ar Vite v4.0.4 izlaišanu, Vites izstrādātāju kopiena ir augusi un aktīvi uztur programmatūru, regulāri pievienojot jaunas funkcijas.

Vites komandrindas interfeiss (CLI)

Vites komandrindas interfeiss (CLI) ir ērts rīks Vites uzvedības pielāgošanai. Tas nodrošina virkni būtisku komandu, kas arī palīdz racionalizēt izstrādes procesu. Šeit ir dažas no svarīgākajām CLI komandām:

vite būvēt

Šī komanda izveidos lietojumprogrammu ražošanas videi, optimizējot un samazinot kodu, lai tas būtu gatavs izvietošanai. Izmantojot šo komandu, varat nodrošināt, ka jūsu lietojumprogramma ir pēc iespējas ātrāka un efektīvāka un gatava izplatīšanai lietotājiem.

vite priekšskatījums

Šī komanda ļauj priekšskatīt ģenerēto kodu pirms tā izvietošanas ražošanā. Ja vēlaties nodrošināt, ka viss izskatās un darbojas, kā paredzēts, un nav redzamu problēmu vai problēmu, kurām būtu jāpievērš uzmanība, šī ir noderīga komanda.

vite optimizēt

vite optimizēt ir pieejams Vite 2.6 un jaunākās versijās, kas analizē projekta kodu un ģenerē optimizētas ražošanas būves, veicot koku kratīšana, koda sadalīšanas darbības un mazu līdzekļu iegulšana tieši galīgajā būvniecībā, lai samazinātu pieprasījumus, kas nepieciešami, lai ielādētu lietotne.

vite optimizēt tiek automātiski izpildīts laikā vite būvēt komandu, kas ģenerē optimizētas ražošanas būves. Varat arī palaist to atsevišķi, lai pārbaudītu būvējuma izmēru un veiktspēju

Vites konfigurācijas fails

Programmā Vite konfigurācijas fails definē dažādas veidošanas procesa opcijas. Vite konfigurācijas fails izmanto JavaScript un ES6 moduļu sintaksi.

Pēc noklusējuma konfigurācijas failam ir jāpiešķir nosaukums vite.config.js un ievietojiet to projekta saknes direktorijā.

Šeit ir dažas no Vite konfigurācijas failā visbiežāk izmantotajām opcijām:

• sakne. Norāda projekta saknes direktoriju.
• serveris. Konfigurē izstrādes serveri. Tajā ir iekļautas opcijas resursdatora, porta un starpniekservera pieprasījumu konfigurēšanai API aizmugursistēmai.
• spraudņi. Ļauj Vite veidošanas procesam pievienot spraudņus. Spraudnis ir funkcija, kas kaut kādā veidā maina veidošanas procesu, piemēram, pievieno atbalstu jaunam faila formātam vai pārveido pirmkodu.
• atrisināt. Tas konfigurē, kā Vite projektā atrisina importēšanu. Tajā ir iekļautas iespējas norādīt aizstājvārdus, paplašinājumus un moduļu direktorijus.

Šeit ir Vite konfigurācijas faila piemērs:

imports {defineConfig} no'vite';
imports ceļš no'ceļš';
eksportētnoklusējuma defineConfig({
 serveris: {
 osta: 3000,
 atvērts: taisnība,
 },
 atrisināt: {
 aizstājvārds: {
'@': path.resolve (__dirname, './src'),
 },
 },
 spraudņi: [],
});

Šis konfigurācijas fails iestata pamata Vite projektu ar:

• vietējais izstrādes serveris, kas darbojas portā 3000
• pseidonīms src direktoriju
• nav spraudņu

Vitei ir spēcīga kopiena

Vairāki tiešsaistes resursi ļoti detalizēti izskaidro, kā izmantot Vite ar tādiem populāriem ietvariem kā React, Vue un Angular.

Turklāt oficiālajā dokumentācijā ir daudz informācijas par efektīvu Vite lietošanu. Izmantojot šos pieejamos resursus, ir iespējams integrēt Vite savā nākamajā projektā.