Vite v4.0.4 julkaistiin 3. tammikuuta 2023 ja parantaa Vite-kehitysympäristön toimintoja ja tulee vain viisi kuukautta Vite 3:n jälkeen. Uusi versio sisältää uusia ominaisuuksia ja päivityksiä, jotka tekevät JavaScript-kehityskokemuksesta entistä nopeamman ja vahvemman.
Täällä keskustelemme siitä, mikä Vite on, tärkeistä Vite 4:n ominaisuuksista ja päivityksistä.
Mitä iI Vite?
Sana "vite" itsessään tarkoittaa "nopeaa". Se on etupään rakennustyökalu ja kehityspalvelin, joka on suunniteltu tarjoamaan nopeampi, kevyt ja yksinkertainen kehityskokemus. Se palvelee koodiasi kehitystyön aikana, niputtaa tiedostosi tuotantoa varten ja mahdollistaa helpon integroinnin erilaisiin JavaScript-kehykset ja kirjastot, kuten Vue, React, Preact ja Svelte.
Vite on käynyt läpi lukuisia parannuksia viimeisen kahden vuoden aikana, ja Vite 4 tuo useita uusia ja parannettuja ominaisuuksia.
1. Rollup 3
Rollup on JavaScript-moduulien niputtaja, jonka avulla kehittäjät voivat niputtaa erilaisia JavaScript-moduulit yhdeksi tiedostoksi. Tämä puolestaan parantaa sovelluksen suorituskykyä vähentämällä pyyntöjen määrää, jotka selaimen on tehtävä koodin lataamiseksi.
Vite käyttää nyt Rollup 3:a rakennusaikana. Viten versio 3 käytti Rollup 2:ta, mutta Rollup 3:n julkaisun jälkeen lokakuussa 2022 Viten uuteen versioon tuli merkittävä päivitys Rollup 3:een.
Tutustu Rollup-siirtooppaaseen ennen Rollup 3:een päivittämistä, koska ongelmia saattaa ilmetä, vaikka Rollup 3 on pääosin yhteensopiva Rollup 2:n kanssa.
2. Uusi React-laajennus Speedy Web Compiler (SWC) -kääntäjällä
SWC on supernopea JavaScript-kääntäjä, joka on kirjoitettu Rustilla. SWC ja Babel ovat molemmat JavaScript-kääntäjiä, jotka muuttavat koodisi selaimien tukemaan, mutta SWC on väittänyt olevansa nopeampi kuin Babel.
Koska Vite v3 käytti Babelia, v4:n mukana tulee SWC korvaavana tai vaihtoehtona, erityisesti React-projekteissa.
Vite jatkaa Babelin tukemista, mutta Vite 4 esittelee kaksi laajennusta (vitejs/plugin-react ja vitejs/plugin-react-swc), joilla on erilaisia kompromisseja React-projekteille.
Vitejs/plugin-react Plugin
Tämä laajennus tarjoaa nopean Hot Module Replacement -moduulin vaihtamisen minimaalisella pakettikokolla käyttämällä esbuildia ja Babelia. Se tarjoaa myös Babel-muunnosputkilinjan käytön lisäjoustavuutta.
Kuumamoduulin vaihto mahdollistaa rasvan virkistyksen. Sen avulla kehittäjät voivat päivittää käynnissä olevan sovelluksen moduuleja tarvitsematta päivittää koko sivua. Asenna laajennus projektiisi noudattamalla alla olevaa esittelyä.
npm asennus @vitejs/plugin-react
Noudata alla olevaa koodia tuodaksesi laajennuksen projektiisi;
tuonti { defineConfig } alkaen"vite"
tuonti reagoida alkaen'@vitejs/plugin-react'
viedäoletuksena defineConfig({
laajennuksia: [reagoi ()],
})
Vitejs/plugin-react-swc Plugin
Tämä on uusi laajennus, joka käyttää esbuildia rakentamisen aikana ja Speed Web Compileria kehityksen aikana.
Korvaamalla Babelin SWC: llä laajennuksen tavoitteena on nopeuttaa kehitysprosessia merkittävästi erityisesti projekteissa, jotka eivät vaadi standardista poikkeavia React-laajennuksia.
Näin asennat laajennuksen;
npm i @vitejs/plugin-react-swc
Tuo se projektiisi seuraavasti;
tuonti { defineConfig } alkaen"vite";
tuonti reagoida alkaen"@vitejs/plugin-react-swc";
viedäoletuksena defineConfig({
laajennuksia: [reagoi ()],
});
3. CSS: n tuonti merkkijonona
Tämä ominaisuus tarjoaa ratkaisun Vite 3 CSS: n kaksoislatauskäyttäytymiseen, joka tapahtuu tuomalla oletusarvoinen CSS-tiedoston vienti, esim.:
tuonti cssString alkaen'./global.cssTämän toiminnan estämiseksi Vite 4 ottaa käyttöön ?inline kyselyn jälkiliitteen muokkaajan. Tässä on esittely syntaksista;
tuonti cssString alkaen'./global.css? linjassa'V3 CSS-oletusvienti on siksi vanhentunut.
4. ympäristömuuttujat
Vite päivitti riippuvuutensa dotenv: stä ja dotenv-expandista. Käytössä olevat uudet versiot ovat dotenv 16 ja dotenv-expand 9. Tämä päivitys edellyttää arvot, jotka sisältävät merkit "#" tai "`" lainausmerkeissä oikean toiminnan varmistamiseksi. Tässä on esimerkki;
SECRET_HASH="jotain-kanssa-a-#-hash"ENV-tiedostojen päivittämisen helpottamiseksi Vite on suositellut dotenv-komentoriviliittymän käyttöä. Tämä on valinnainen laajennus, joka voi auttaa varmistamaan, että ENV-tiedostot ovat yhdenmukaisia eri koneissa, ympäristöissä tai tiimin jäsenissä. Se voi auttaa tekemään ENV-tiedostojen päivittämisestä vähemmän tylsää.
Muut päivitykset, korjaukset ja siirtyminen Vite v4.0.4:ään
Vite on lisännyt lisää komentorivikäyttöliittymän pikakuvakkeita. Näet luettelon kaikista pikanäppäimistä painamalla -näppäintä h kehityksen aikana.
Nykyaikainen selainversio on myös nyt oletuksena kohdistettu safari14:ään laajemman ES2020-yhteensopivuuden vuoksi. Korjauspaketti tukee riippuvuuksien esipakettia, SSR: n aikana on parannettuja virheilmoituksia ja paljon muuta.
