Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Vite v4.0.4, išleistas 2023 m. sausio 3 d., patobulina Vite kūrimo aplinkos funkcijas ir ateina praėjus vos penkiems mėnesiams po Vite 3. Naujoje versijoje yra naujų funkcijų ir atnaujinimų, dėl kurių JavaScript kūrimo patirtis bus greitesnė ir stipresnė nei anksčiau.

Čia aptarsime, kas yra Vite, svarbias funkcijas ir atnaujinimus, esančius Vite 4.

Kas aš Vite?

Pats žodis „vite“ reiškia „greitai“. Tai yra priekinės klasės kūrimo įrankis ir kūrimo serveris, kuris yra sukurtas siekiant užtikrinti greitesnį, lengvą ir paprastą kūrimo patirtį. Jis aptarnauja jūsų kodą kūrimo metu, sujungia failus gamybai ir leidžia lengvai integruoti su įvairiais „JavaScript“ sistemos ir bibliotekos, pvz., „Vue“, „React“, „Preact“ ir „Svelte“.

Vite per pastaruosius dvejus metus buvo atlikta daug patobulinimų, o „Vite 4“ suteikia keletą naujų ir patobulintų funkcijų.

instagram viewer

1. 3 apibendrinimas

Suvynioti yra „JavaScript“ modulių rinktuvas, leidžiantis kūrėjams susieti skirtingus JavaScript moduliai į vieną failą. Tai savo ruožtu pagerina programos našumą, nes sumažina užklausų, kurias naršyklė turi pateikti norint įkelti kodą, skaičių.

Dabar „Vite“ kūrimo metu naudoja „Rollup 3“. „Vite“ 3 versijoje buvo naudojamas „Rollup 2“, tačiau 2022 m. spalio mėn. išleidus „Rollup 3“, naujojoje „Vite“ versijoje buvo atliktas esminis „Rollup 3“ atnaujinimas.

Prieš naujovindami į 3 sudėtinį paketą turėtumėte perskaityti perkėlimo vadovą, nes gali kilti problemų, net jei 3 rinkinys dažniausiai suderinamas su 2 rinkiniu.

2. Naujas „React“ papildinys naudojant „Speedy Web Compiler“ (SWC)

SWC yra ypač greitas „JavaScript“ kompiliatorius, parašytas „Rust“. SWC ir Babelis abu yra „JavaScript“ kompiliatoriai, kurie konvertuoja jūsų kodą į tai, ką palaiko naršyklės, tačiau SWC teigė esąs greitesnis nei „Babel“.

Kadangi Vite v3 naudojo Babel, v4 pateikiamas kartu su SWC kaip pakaitalu arba alternatyva, ypač React projektams.

Nors „Vite“ ir toliau palaiko „Babel“, „Vite 4“ pristato du papildinius (vitejs/plugin-react ir vitejs/plugin-react-swc) su skirtingais „React“ projektų kompromisais.

Vitejs/plugin-react įskiepis

Šis papildinys užtikrina greitą karštojo modulio pakeitimą naudojant minimalų paketo dydį, naudojant esbuild ir Babel. Tai taip pat suteikia papildomo lankstumo, nes galima naudoti Babel transformacijos dujotiekį.

Karšto modulio pakeitimas leidžia atnaujinti riebalus. Tai leidžia kūrėjams atnaujinti veikiančios programos modulius neatnaujinant viso puslapio. Vykdykite toliau pateiktą demonstraciją, kad įdiegtumėte papildinį savo projekte.

npm įdiegti @vitejs/plugin-react

Vykdykite toliau pateiktą kodą, kad importuotumėte papildinį į savo projektą;

importuoti { defineConfig } iš"Vite"
importuoti reaguoti iš'@vitejs/plugin-react'
eksportuotinumatytas defineConfig({
įskiepių: [reaguoti ()],
})

Vitejs/plugin-react-swc įskiepis

Tai naujas įskiepis, kuris kūrimo metu naudoja esbuild, o kūrimo metu – greitojo žiniatinklio kompiliatorių.

Pakeitus „Babel“ į SWC, papildiniu siekiama žymiai pagreitinti kūrimo procesą, ypač projektams, kuriems nereikia nestandartinių „React“ plėtinių.

Štai kaip įdiegti papildinį;

npm i @vitejs/plugin-react-swc

Importuokite jį į savo projektą taip;

importuoti { defineConfig } iš"Vite";
importuoti reaguoti iš"@vitejs/plugin-react-swc";
eksportuotinumatytas defineConfig({
įskiepių: [reaguoti ()],
});

3. CSS importavimas kaip eilutė

Ši funkcija leidžia išspręsti „Vite 3“ CSS dvigubo įkėlimo veiksmus, atsirandančius importuojant numatytąjį CSS failo eksportą, pvz.:

importuoti cssString iš'./global.css

Siekiant užkirsti kelią tokiam elgesiui, Vite 4 pristato ?inline užklausos priesagos modifikatoriaus naudojimą. Čia yra sintaksės demonstravimas;

importuoti cssString iš'./global.css? inline'

Todėl numatytasis v3 CSS eksportavimas nebenaudojamas.

4. aplinkos įvairovė

Vite atnaujino savo priklausomybes nuo dotenv ir dotenv-expand. Naudojamos naujos versijos yra atitinkamai dotenv 16 ir dotenv-expand 9. Norint užtikrinti tinkamą funkcionalumą, norint atlikti šį naujinimą, reikės apvynioti reikšmes, kuriose yra simboliai „#“ arba „`“. Štai pavyzdys;

SECRET_HASH="kažkas-su-a-#-hash"

Siekdama palengvinti ENV failų atnaujinimo procesą, Vite rekomendavo naudoti dotenv komandinės eilutės sąsają. Tai yra pasirenkamas papildinys, galintis padėti užtikrinti, kad ENV failai būtų nuoseklūs įvairiuose įrenginiuose, aplinkose ar komandos nariuose. Tai gali padėti padaryti ENV failų atnaujinimo procesą mažiau varginantį.

Kiti atnaujinimai, pataisymai ir perkėlimas į Vite v4.0.4

Vite pridėjo daugiau komandų eilutės sąsajos nuorodų. Norėdami pamatyti visų nuorodų sąrašą, paspauskite h vystymosi metu.

Šiuolaikinė naršyklės versija taip pat dabar taikoma pagal numatytuosius nustatymus „safari14“, kad būtų užtikrintas platesnis ES2020 suderinamumas. Iš anksto susiejant priklausomybes palaikomas pataisų paketas, patobulinti klaidų pranešimai SSR metu ir dar daugiau.