Darbo su Vite pradžia: galutinis kūrimo įrankis

Žiniatinklio programose tampa vis daugiau funkcijų, todėl sparčių ir efektyvių kūrimo įrankių poreikis ir toliau auga.

Vite yra modernus kūrimo įrankis, suteikiantis žaibišką kūrimo serverį ir optimizuotą kūrimo procesą, leidžiantį vartotojams supaprastinti darbo eigą ir pagerinti galutinio vartotojo patirtį.

Išsiaiškinsite, kaip pradėti naudoti „Vite“, apžvelgdami jo diegimo procesą, pagrindines funkcijas ir komandų eilutės sąsajos (CLI) komandas.

Inicijuokite Vite projektą

Prieš pradėdami vartoti Vite, turite įdiegti Node.js ir Node Package Manager jūsų sistemoje. Įdiegę šiuos du paketus, galite pradėti kurti projektą naudodami Vite.

Štai kaip inicijuoti projektą su Vite naudojant npm:

npm init vite

Kai vykdote šią komandą, dabartiniame darbo kataloge sukuriamas naujas Vite projektas. Komanda ragina atlikti pagrindinius konfigūracijos pasirinkimus, kad nustatytumėte naują Vite projektą.

Čia pateikiamas parinkčių, kurias komanda ragina pasirinkti, suskirstymas:

1. Projekto pavadinimas. Kai paleidžiate komandą, ji paragins nurodyti naujo projekto pavadinimą. Jūsų pateiktas vardas taip pat bus rodomas package.json failą ir tarnauja kaip projekto katalogo pavadinimas.
2. Pasirinkite karkasą. Šis raginimas jūsų paprašys pasirinkti savo projekto struktūrą. Šiuo metu „Vite“ palaiko tokias populiarias sąsajas kaip „React“, „Vue“, „Angular“ ir „Vanilla“ parinktį paprastam „JavaScript“ kodui.
3. Pasirinkite variantą. Tai paragins jus pasirinkti projekto variantą, apimantį tokias alternatyvas kaip „JavaScript“ ir jo poaibio kalba TypeScript.

Pateikus reikiamą informaciją, Vite dabartiniame darbo kataloge sugeneruos naują projekto struktūrą. Struktūra bus pagrindinė projekto sąranka, įskaitant a package.json failas, a src katalogas su an index.html ir main.js failą ir a viešas katalogas.

Sukūrę projekto struktūrą, paleisdami galite pereiti į projekto katalogą cd . Kai tai padarysite, įdiekite visas papildomas priklausomybes, kurių gali prireikti jūsų projektui, naudodami npm diegimas komandą.

Norėdami paleisti kūrimo serverį ir stebėti bet kokius projekto pakeitimus, paleiskite npm paleisti dev komandą projekto terminale.

Vite savybės

„Vite“ funkcijos yra skirtos supaprastinti kūrimo procesą ir pagerinti žiniatinklio kūrimo patirtį.

Greitos plėtros serveris

„Vite“ kūrimo serveris naudoja vietinius ES modulius ir tingų modulių įkėlimą, todėl užtikrina neįtikėtiną greitį. Tai užtikrina greitą grįžtamojo ryšio kilpą ir žaibišką paleidimo laiką.

Optimizuotas kūrimo procesas

Vite patobulino savo kūrimo procedūrą, kad sukurtų gamybai paruoštą, optimizuotą ir sumažintą kodą. Be to, jis sukuria manifesto failą, kuris gali talpykloje laikyti biusto ir versijos išteklius.

Įvairių Front-End Frameworkų palaikymas

„Vite“ palaiko įvairias sąsajas, įskaitant „Vue“ ir panašios sistemos, tokios kaip React Js ir Angular Js. Tai leidžia kūrėjams pasirinkti pageidaujamą sistemą ir panaudoti galingas Vite galimybes.

Karšto modulio keitimas (HMR)

„Vite“ karštojo modulio keitimo (HMR) funkcija leidžia greitai ir sklandžiai atnaujinti programą, nereikalaujant viso puslapio atnaujinimo. Tai daro kūrimo procesą greitesnį ir efektyvesnį.

CSS išankstinis apdorojimas ir postCSS integravimas

„Vite“ palaiko išankstinį CSS apdorojimą, įskaitant „Sass“, „Less“ ir „Stylus“. Jis taip pat integruojamas su PostCSS, leidžiantis papildomai transformuoti ir optimizuoti CSS.

„Vite“ yra su daugybe kitų funkcijų, įskaitant „TypeScript“, JSX ir „WebAssembly“ palaikymą. Išleidus Vite v4.0.4, Vite kūrėjų bendruomenė išaugo ir aktyviai prižiūri programinę įrangą, reguliariai prideda naujų funkcijų.

„Vite“ komandų eilutės sąsaja (CLI)

„Vite“ komandų eilutės sąsaja (CLI) yra patogus įrankis, leidžiantis tinkinti „Vite“ elgesį. Jame pateikiamos įvairios esminės komandos, kurios taip pat padeda supaprastinti kūrimo procesą. Štai keletas svarbiausių CLI komandų:

vite statyti

Ši komanda sukurs programą gamybos aplinkai, optimizuos ir sumažins kodą, kad jis būtų paruoštas diegti. Naudodami šią komandą galite užtikrinti, kad jūsų programa būtų kuo greitesnė ir efektyvesnė bei paruošta platinti vartotojams.

vite peržiūra

Ši komanda leidžia peržiūrėti sugeneruotą kodą prieš diegiant jį gamybinėje sistemoje. Jei norite užtikrinti, kad viskas atrodytų ir veiktų taip, kaip tikėtasi, ir nėra jokių akivaizdžių problemų ar problemų, į kurias reikėtų atkreipti dėmesį, tai yra naudinga komanda, kurią reikia paleisti.

vite optimizuoti

vite optimizuoti yra Vite 2.6 ir naujesnėse versijose, kurios analizuoja projekto kodą ir generuoja optimizuotas gamybos versijas atlikdamos medį kratymas, kodo padalijimo operacijos ir nedidelių išteklių įterpimas tiesiai į galutinį kūrinį, kad sumažėtų užklausų, reikalingų įkelti programėlė.

vite optimizuoti automatiškai vykdo per vite statyti komanda, kuri generuoja optimizuotas gamybos versijas. Taip pat galite jį paleisti atskirai, kad patikrintumėte konstrukcijos dydį ir našumą

Vite konfigūracijos failas

Vite konfigūracijos failas apibrėžia įvairias kūrimo proceso parinktis. Vite konfigūracijos failas naudoja JavaScript ir ES6 modulių sintaksę.

Pagal numatytuosius nustatymus turėtumėte pavadinti konfigūracijos failą vite.config.js ir įdėkite jį į projekto šakninį katalogą.

Štai keletas dažniausiai naudojamų Vite konfigūracijos failo parinkčių:

• šaknis. Nurodo projekto šakninį katalogą.
• serveris. Konfigūruoja kūrimo serverį. Tai apima pagrindinio kompiuterio, prievado ir tarpinio serverio užklausų API pagrindinei programai konfigūravimo parinktis.
• įskiepių. Leidžia pridėti priedų į Vite kūrimo procesą. Papildinys yra funkcija, kuri tam tikru būdu modifikuoja kūrimo procesą, pvz., prideda palaikymą naujam failo formatui arba transformuoja šaltinio kodą.
• išspręsti. Taip sukonfigūruojama, kaip Vite sprendžia importavimą projekte. Jame yra parinktys, leidžiančios nurodyti slapyvardžius, plėtinius ir modulių katalogus.

Štai Vite konfigūracijos failo pavyzdys:

importuoti { defineConfig } iš"Vite";
importuoti kelias iš'kelias';
eksportuotinumatytas defineConfig({
 serveris: {
 prievadas: 3000,
 atviras: tiesa,
 },
 išspręsti: {
 slapyvardis: {
'@': path.resolve (__dirname, './src'),
 },
 },
 papildiniai: [],
});

Šis konfigūracijos failas nustato pagrindinį Vite projektą su:

• vietinis plėtros serveris, veikiantis prievade 3000
• pseudonimas src katalogas
• jokių įskiepių

Vite turi stiprią bendruomenę

Keliuose internetiniuose šaltiniuose labai išsamiai paaiškinama, kaip naudoti „Vite“ su populiariomis sistemomis, tokiomis kaip „React“, „Vue“ ir „Angular“.

Be to, oficialioje dokumentacijoje yra daug informacijos apie veiksmingą Vite naudojimą. Turėdami šiuos išteklius, galite integruoti Vite į kitą projektą.