Olemme siirtäneet kolme frontend-projektiamme Parcelista Viteen, ja prosessi oli... sujuva.
Meillä on kolme pääasiallista frontend-projektia Logtossa: kirjautumiskokemus, Console ja live-esikatselu. Nämä projektit ovat kaikki TypeScriptillä, Reactilla ja SASS-moduuleilla; yhteensä niissä on noin 100 000 koodiriviä.
Rakastimme Parcelia sen yksinkertaisuuden ja nolla-asetuksen vuoksi. Muistan vieläkin päivän, jolloin hämmästyin siitä, kuinka helppoa oli perustaa uusi projekti Parcelilla. Voit vain suorittaa parcel index.html ja boom, kaikki tarvittavat riippuvuudet asennetaan ja projekti toimii. Jos olet "kokeneempi" kehittäjä, saatat tuntea samoin verratessasi sitä vanhoihin päiviin Gul-pilla ja Webpackilla. Parcel on kuin taikasauva.
Parcelin yksinkertaisuus oli pääsyy siihen, miksi pysyttäydyimme siinä niin pitkään, vaikka se saattoi olla joskus oikukas. Esimerkiksi:
Miksi päätimme siirtyä muuhun?
Joku jopa avasi keskustelun kysyäkseen onko Parcel kuollut. Virallinen vastaus on että ei, Parcel on yhä elossa, mutta se on tilassa jossa "meillä on käynnissä suuri refaktori eikä aikaa pienille julkaisuille". Meille se on kuin "ankan kuolema": viimeisin versio, jota voimme käyttää, on yli vuoden takainen, emmekä tiedä milloin seuraava versio julkaistaan. Se näyttää kuolleelta, se käyttäytyy kuin kuollut, joten se on kuollut meille.
Tunsimme Viten Vitestistä. Useita kuukausia sitten olimme väsyneitä Jestin ESM-tukeen (testauksessa) ja halusimme kokeilla jotain uutta. Vitest voitti sydämemme natiivilla ESM-tuellaan ja Jest-yhteensopivuudellaan. Sillä on loistava kehittäjäkokemus, ja se on Viten voimanlähde.
Sinulla saattaa olla erilaiset asetukset projektissasi, mutta yleensä löydät korvaavia plugineja, kun Vite-ekosysteemi kukoistaa. Tässä ovat asetuksemme siirtymähetkellä:
Aloitimme siirtymän luomalla uuden Vite-projektin ja leikkimällä sillä nähdäksemme, miten se toimii. Prosessi oli sujuva ja varsinainen siirtymä kesti vain muutaman päivän.
Vite tukee valmiiksi monorepoja, ESM:ää, TypeScriptiä, Reactia ja SASS:ia. Meidän tarvitsi vain asentaa tarvittavat pluginit ja konfiguraatiot saadaksemme sen toimimaan.
Vite tukee valmiiksi polkualiasia, esimerkiksi tsconfig.json-tiedostossamme:
Meidän tarvitsi vain lisätä sama resoluutio vite.config.ts-tiedostoossa:
Huomaa, että korvauspolun tulisi olla absoluuttinen polku, vaikka se on suhteellinen projektin juureen nähden. Vaihtoehtoisesti voit käyttää vite-tsconfig-paths pluginia lukeaksesi polkualiasit tsconfig.json-tiedostosta.
Vaikka Vite tukee valmiiksi HMR:ää, se vaatii pluginin asentamisen React Fast Refreshin ottamiseksi käyttöön. Käytimme @vitejs/plugin-react-pluginia, joka on Vite-tiimin tarjoama ja sisältää loistavan tuen React-ominaisuuksille, kuten Fast Refresh:
Käytämme vite-plugin-svgr-pluginia muuntaaksemme SVG:t React-komponenteiksi. Se on niin yksinkertaista kuin pluginin lisääminen Vite-konfiguraatioon:
Emme kuitenkaan määrittäneet, millä ehdolla SVG:t tulisi muuntaa React-komponenteiksi, joten kaikki tuonnit muunnettiin. Plugin tarjoaa paremman oletuskonfiguraation: muunna vain SVG:t, jotka tuodaan .svg?react-laajennuksella. Päivitimme tuontimme vastaavasti.
Vaikka Vite tukee valmiiksi SASS-moduuleita, on yksi asia, josta meidän on huolehdittava: kuinka luokkien nimet muotoillaan. Se voi olla vaivalloista käyttäjille ja integraatiotesteillemme, jos luokkien nimet eivät ole yhdenmukaisesti muotoiltuja. Yksinkertainen määritys vite.config.ts-tiedostossa voi ratkaista ongelman:
Muuten, Parcel ja Vite käyttävät erilaisia makuja tuontia varten SASS-tiedostoissa:
* as-syntaksi toimii kuitenkin Vitessä, mutta se aiheuttaa modulaaristen luokkien nimien menetyksen, kun käytät dynaamisia avaimia tietorakenteen styles objektiin. Esimerkiksi:
Koska Vite käyttää Rollupia taustalla, voimme käyttää virallista @mdx-js/rollup-pluginia tukemaan MDX:ää sekä sen plugineja. Määritys näyttää tältä:
remarkGfm-plugini tukee GitHub Flavored Markdownia, ja rehypeMdxCodeProps-plugini välittää rekvisiitat MDX-tiedostojen koodilohkoihin kuten Docusaurus tekee.
Haluaisimme käyttää Mermaid-kaavioita MDX-tiedostoissamme muiden ohjelmointikielten tavoin. Käytön pitäisi olla yhtä yksinkertaista kuin muiden koodilohkojen:
Pitäisi näyttää tältä:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M72.451%2c62L67.598%2c66.167C62.746%2c70.333%2c53.041%2c78.667%2c48.188%2c86.333C43.336%2c94%2c43.336%2c101%2c43.336%2c104.5L43.336%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_C_1' d='M135.338%2c62L140.191%2c66.167C145.043%2c70.333%2c154.748%2c78.667%2c159.601%2c86.333C164.453%2c94%2c164.453%2c101%2c164.453%2c104.5L164.453%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_D_2' d='M43.336%2c166L43.336%2c170.167C43.336%2c174.333%2c43.336%2c182.667%2c47.683%2c190.566C52.029%2c198.465%2c60.723%2c205.929%2c65.069%2c209.662L69.416%2c213.394'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_C_D_3' d='M164.453%2c166L164.453%2c170.167C164.453%2c174.333%2c164.453%2c182.667%2c160.106%2c190.566C155.76%2c198.465%2c147.066%2c205.929%2c142.72%2c209.662L138.373%2c213.394'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(103.89453125%2c 35)' id='flowchart-A-0' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eA%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(43.3359375%2c 139)' id='flowchart-B-1' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eB%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(164.453125%2c 139)' id='flowchart-C-3' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eC%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(103.89453125%2c 243)' id='flowchart-D-5' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eD%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Koska sovelluksemme tukee valo- ja tummateemoja, koodasimme hieman saadaksemme Mermaid-kaaviot toimimaan tummalla teemalla. React-komponentti on luotu:
useTheme on räätälöity hook, joka hakee nykyisen teeman kontekstista. mermaid-kirjasto tuodaan asynkronisesti latauskokoon pienentämiseksi alkuperäisessä sivulatauksessa.
MDX-tiedoston koodilohkoa varten meillä on yhtenäinen komponentti työn suorittamiseksi:
Lopuksi määrittelimme MDX-tarjoajan seuraavasti:
Tämä ei ole Vite-spesifi asia, mutta se on silti mainitsemisen arvoinen, sillä päivitimme sivumme käyttämään latauksen viivästystä siirtymän aikana, eikä mikään rikkonut sen jälkeen.
Reactin sisäänrakennettu React.lazy-funktio viivästettyjen komponenttien lataamiseksi kuitenkin saattaa aiheuttaa joitain ongelmia nopean iteroinnin aikana. Loimme pienen kirjaston nimeltä react-safe-lazy ongelmien ratkaisemiseksi. Se on pudotusvaihtoehto React.lazylle, ja yksityiskohtainen selitys löytyy tästä blogikirjoituksesta.
On olemassa kätevä plugin nimeltä vite-plugin-compression pakattujen resurssien tuottamiseksi. Se tukee sekä gzip- että brotli-pakkausta. Määritys on yksinkertainen:
Yksi hieno ominaisuus Viteessa (tai taustalla olevassa Rollupissa) on manuaaliset kontit. Vaikka React.lazy käytetään komponenttien laiskaan lataamiseen, meillä on enemmän hallintaa kontteihin määrittämällä manuaaliset kontit päättääksemme, mitkä komponentit tai moduulit pitäisi niputtaa yhteen.
Esimerkiksi voimme ensin käyttää vite-bundle-visualizer analysoidaksemme paketin kokoa ja riippuvuuksia. Sitten voimme kirjoittaa asianmukaisen funktion lohkojen jakamiseksi:
Toisin kuin tuotantorakenne, Vite EI niputa lähdekoodiasi kehitystilassa (mukaan lukien linkitetyt riippuvuudet samassa monorepossa) ja käsittelee jokaista moduulia tiedostona. Meille selain lataa satoja moduuleja ensimmäisellä kerralla, mikä näyttää hullulta, mutta se on oikeastaan fine useimmissa tapauksissa. Voit nähdä keskustelun tässä.
Jos tämä on sinulle ongelma, vaihtoehtoinen mutta epätäydellinen ratkaisu on listata linkitetyt riippuvuudet optimizeDeps-vaihtoehtoon vite.config.ts-tiedostoossa:
Tämä "ennakkoniputtaa" linkitetyt riippuvuudet ja nopeuttaa kehityspalvelinta. Haittapuoli on, että HMR ei välttämättä toimi odotetusti linkitetyillä riippuvuuksilla.
Lisäksi käytämme välityspalvelinta, joka palvelee staattisia tiedostoja tuotannossa ja välittää pyynnöt Vite-palvelimeen kehityksessä. Meillä on joitain määritettyjä portteja konfliktien välttämiseksi, ja se on myös helppo määrittää vite.config.ts-tiedostoossa:
Toisin kuin Parcel, Vite käyttää modernia lähestymistapaa ympäristömuuttujien käsittelyyn käyttämällä import.meta.env. Se lataa automaattisesti .env-tiedostot ja korvaa muuttujat koodissa. Se vaatii kuitenkin, että kaikilla ympäristömuuttujilla on VITE_-etuliite (määritettävissä).
Kun käytimme Parcelia, se yksinkertaisesti korvasi process.env-muuttujat ilman etuliitteen tarkistamista. Joten olemme keksineet kiertotavan käyttämällä define-kenttää helpottamaan siirtymää:
Tämä sallii meidän lisätä vähitellen etuliitteen ympäristömuuttujille ja poistaa define-kentän.
Siinä se! Olemme onnistuneesti siirtäneet kolme frontend-projektiamme Parcelista Viteen, ja toivomme, että tämä lyhyt tarina voi auttaa sinua omassa siirtymässäsi. Tässä miltä konfiguraatio näyttää lopussa: