Reactin asennus Vitellä
Opastamme React- ja TypeScript-projektin luomisessa Vitellä, kehityspalvelimen käynnistämisessä, buildin tekemisessä ja julkaisussa sekä yleisten virheiden ratkaisussa.
Aurora YazılımToimitustiimi
6 min lukuaika
Vite React -asennusta varten asennat ensin Node.js:n ajantasaisen LTS-version. Sen jälkeen annat terminaalissa komennon npm create vite@latest, nimeät projektin ja valitset React- ja TypeScript-pohjan. Siirryt projektikansioon, asennat riippuvuudet komennolla npm install ja käynnistät kehityspalvelimen komennolla npm run dev; sivusto avautuu oletuksena osoitteessa localhost:5173.
Mikä Vite on ja miksi sitä käytetään?
Vite on nykyaikaisia verkkoprojekteja varten kehitetty build-työkalu ja kehityspalvelin. Kehityksen aikana se tarjoaa koodin selaimen natiilin ES-moduulituen kautta ja käsittelee vain pyydetyn tiedoston. Siksi palvelin käynnistyy sekunneissa projektin kasvaessakin, ja tallentamasi muutos näkyy ruudulla ilman sivun päivitystä.
Julkaisuvaiheessa Vite paketoi koodisi pienennettyinä, osiin jaettuina ja välimuistille sopivilla tiedostonimillä. Se tarjoaa valmiit pohjat kirjastoille kuten React, Vue ja Svelte, ja siitä on tullut yksi yleisimmistä lähtökohdista React-ekosysteemissä.
Vite Create React Appin vaihtoehtona
Pitkään React-projektit aloitettiin Create React Appilla. React-tiimi ei enää suosittele tätä työkalua uusiin projekteihin; viralliset ohjeet neuvovat aloittamaan joko kehyksellä (kuten Next.js) tai Vitekaltaisella build-työkalulla. Jos etsit vaihtoehtoa Create React Appille, Vite on nopein siirtymätie vähimmällä konfiguroinnilla.
Jos tarvitset palvelinpuolen sivutuotantoa, tiedostopohjaista reititystä ja valmista sivulähtöä SEO:ta varten, tutustu oppaaseemme Next.js-asennus. Hallintapaneeliin, sisäiseen työkaluun tai yhden sivun sovellukseen (SPA) Vite on yleensä yksinkertaisempi valinta.
Edellytykset
Viten ainoa todellinen edellytys on Node.js. Vite lopettaa vanhojen Node-versioiden tuen uusissa versioissaan, joten turvallisin tapa on asentaa nodejs.org-sivuston ajantasainen LTS-versio. npm tulee Node.js:n mukana.
- Node.js:n ajantasainen LTS-versio ja sen mukana tuleva npm.
- Koodieditori; asennuksesta ja suositelluista lisäosista lue artikkeli VS Code -asennus.
- Terminaali: Windowsissa PowerShell tai Windows Terminal, macOSissa Terminal, Linuxissa haluamasi komentotulkki.
- Valinnainen: Git versionhallintaan.
Node.js käyttöjärjestelmän mukaan
Voit ladata ja asentaa Node.js:n osoitteesta nodejs.org. Jos käytät eri projekteissa eri Node-versioita, versionhallintatyökalu helpottaa työtäsi myöhemmin.
Windows
Lataa nodejs.org-sivustolta LTS-asennustiedosto ja asenna oletusasetuksilla tai käytä PowerShellissä winget-työkalua. Asennuksen jälkeen sulje terminaali ja avaa se uudelleen, jotta PATH päivittyy.
winget install OpenJS.NodeJS.LTS
node -v
npm -vmacOS
Voit käyttää virallista asennuspakettia tai, jos Homebrew on asennettuna, asentaa yhdellä komennolla.
brew install node
node -v
npm -vLinux
Jakelun pakettivarastojen Node-versio on usein vanha. Käyttäjätason asennus nvm:llä antaa ajantasaisen version ja poistaa sudon tarpeen; kun olet asentanut nvm:n sen oman GitHub-sivun asennusskriptillä, suorita seuraavat komennot.
nvm install --lts
nvm use --lts
node -vReact-projektin luominen vaiheittain
Kun Node.js on valmis, React-projektin luominen on kaikissa käyttöjärjestelmissä samanlaista. Komento ohjaa sinua interaktiivisesti: kysytään projektin nimi, kehys (React) ja variantti (TypeScript). Jos haluat määrittää pohjan suoraan komennossa, käytä alla olevaa muotoa; npm:ssä lisäparametrit kirjoitetaan kahden viivan jälkeen.
- Jos haluat työskennellä JavaScriptillä, pohjan nimi on react, TypeScriptille react-ts.
- Avaa selaimessa terminaalin Local-riville ilmestyvä osoite (oletuksena localhost:5173).
- Muuta tekstiä tiedostossa src/App.tsx ja tallenna; jos sivu päivittyy ilman uudelleenlatausta, HMR (välitön moduulinvaihto) toimii.
npm create vite@latest benim-uygulamam -- --template react-ts
cd benim-uygulamam
npm install
npm run devpnpm create vite benim-uygulamam --template react-ts
yarn create vite benim-uygulamam --template react-tsTutustu projektin rakenteeseen
Vite-projektissa ensimmäinen huomiota herättävä ero on, että index.html-tiedosto on juurihakemistossa. Vite käyttää tätä tiedostoa sisääntulopisteenä, ja sen script-tagi kutsuu tiedostoa src/main.tsx.
| Tiedosto / kansio | Tehtävä |
|---|---|
| index.html | Sovelluksen sisääntulosivu; otsikko ja metatagit ovat täällä |
| src/main.tsx | Aloitustiedosto, joka liittää Reactin sivulle |
| src/App.tsx | Pääkomponentti; rakennat omat sivusi tästä |
| public/ | Käsittelemättä kopioitavat tiedostot: favicon, robots.txt |
| vite.config.ts | Lisäosat, aliakset, palvelin- ja build-asetukset |
| package.json | Riippuvuudet sekä dev-, build- ja preview-skriptit |
Ympäristömuuttujat
Vite välittää asiakaskoodiin vain muuttujat, jotka alkavat etuliitteellä VITE_, ja niihin pääsee käsiksi import.meta.env-olion kautta. Nämä muuttujat upotetaan selaimelle meneviin tiedostoihin; älä koskaan laita tähän API:n salaisia avaimia vastaavia tietoja, vaan säilytä ne palvelinpuolella.
VITE_API_URL=https://api.ornek.comBuild ja julkaisu
Kehityspalvelin on tarkoitettu vain paikalliseen työhön. Julkaistavan version tuotat komennolla npm run build; tuloste kirjoitetaan dist-kansioon. npm run preview antaa testata tätä tulostetta paikallisesti todellista julkaisua lähellä olevalla tavalla.
Dist-kansio koostuu pelkistä HTML-, CSS- ja JavaScript-tiedostoista; sen voi ladata mihin tahansa staattiseen palvelinympäristöön tai verkkopalvelimelle kuten Nginx. Nopeuden kannalta on tärkeää, että tiedostot pakataan ja tarjotaan pitkillä välimuistiotsikoilla; näiden asetusten yksityiskohdat käsittelemme sivullamme nopeus- ja suorituskykyoptimointi.
- Jos sovellus julkaistaan alikansiossa (esimerkki.com/paneeli/), aseta tiedostossa vite.config.ts base-asetus kyseiseen polkuun.
- Jos käytät React Routeria, lisää palvelimelle sääntö, joka ohjaa kaikki tuntemattomat osoitteet tiedostoon index.html.
- Sisältösivuilla, joiden pitää näkyä hakukoneissa, pelkkä asiakaspuolen renderöinti voi olla riittämätön; tässä kohtaa hakukoneystävälliset verkkosivut -lähestymistapa korostuu.
npm run build
npm run previewYleiset virheet ja ratkaisut
Suurin osa Vite-asennuksen virheistä johtuu Node-versiosta, portista tai julkaisuasetuksista. Alla oleva taulukko tiivistää yleisimmät tilanteet; lisää komentoja löydät oppaasta npm-komennot.
| Oire | Miksi | Ratkaisu |
|---|---|---|
| Varoitus Vite requires Node.js version... | Vanha Node-versio | Siirry ajantasaiseen LTS-versioon |
| Port 5173 is in use | Portti on auki toisessa prosessissa | Vite kokeilee seuraavaa porttia; kiinteää porttia varten aseta server.port |
| Komentoa node ei löydy | PATH ei ole päivittynyt | Sulje ja avaa terminaali, tarvittaessa käynnistä tietokone uudelleen |
| Tyhjä valkoinen sivu julkaisussa | Väärä base-polku | Korjaa base-asetus julkaisukansion mukaan |
| 404 sivua päivitettäessä | SPA-ohjausta ei ole palvelimella | Ohjaa kaikki polut tiedostoon index.html |
Seuraavat askeleet
Kun projekti toimii, voit lisätä työkaluja kuten React Router reititykseen, TanStack Query tiedonhakuun sekä Tailwind CSS tai CSS Modules tyyleihin. Koodin laadun varmistamiseksi laajenna pohjan mukana tulevia ESLint-asetuksia projektisi mukaan.
Vite ja React muodostavat vahvan perustan liiketoimintasovelluksille kuten varauspaneelille, varastonäkymälle, ajanvarausseurantaan tai QR-menun hallintaan. Tällaisissa tuotteissa käyttöliittymän lisäksi ratkaisevia ovat tietomalli, käyttöoikeudet ja varmuuskopiointi; jos haluat edetä valmiin alustan päällä, toimialakohtaiset ohjelmistoratkaisut säästävät aikaa.
Teknisen perustan lisäksi myös käyttöliittymän suunnittelu on tärkeää: käyttäjäpolun ja näyttöasettelun suunnittelu ennen komponenttien kirjoittamista on UI/UX-suunnittelun perusta. Mobiilinäkymien huomioiminen alusta alkaen on mobiiliystävällisen suunnittelun kannalta paljon halvempaa kuin korjaaminen jälkikäteen.
Usein kysytyt kysymykset
01Onko TypeScript pakollinen Vite- ja React-projektissa?
Ei, react-pohja toimii pelkällä JavaScriptillä. Keskisuurissa ja suurissa projekteissa TypeScript kuitenkin nappaa virheet jo kirjoitusvaiheessa ja helpottaa tiimityötä. Jälkikäteen siirtyminen on mahdollista, mutta react-ts:llä aloittaminen alusta alkaen tuottaa vähemmän työtä.
02Voinko siirtää olemassa olevan Create React App -projektini Viteen?
Kyllä. Perusvaiheet ovat index.html-tiedoston siirtäminen juurihakemistoon, Viten ja React-lisäosan asentaminen react-scriptsin tilalle sekä REACT_APP_-etuliitteisten muuttujien muuttaminen VITE_-etuliitteeksi. Suurissa projekteissa kokeile ensin erillisessä haarassa ja aja testit.
03Riittääkö Vitellä tehty sivusto SEO:n kannalta?
Paneeleille ja sovellusnäkymille se ei ole ongelma. Hakukoneissa sijoittuvilla sisältösivuilla on turvallisempaa tuottaa sisältö HTML:nä palvelimella; tähän valitaan kehys kuten Next.js tai esirenderöintiratkaisu (pre-render).
04Pitäisikö npm:n sijaan käyttää pnpm:ää?
pnpm käyttää levytilaa tehokkaammin ja nopeuttaa asennusta; Vite toimii moitteettomasti molempien paketinhallintatyökalujen kanssa. Tärkeämpää kuin valinta on, että kaikki tiimissä käyttävät samaa työkalua.
Reactin asennus Vitellä on muutaman minuutin työ; todellinen vaiva on sovelluksen arkkitehtuurissa, jonka rakennat sen päälle. Jos tarvitset yrityksellesi räätälöidyn paneelin, varaus- tai hallintaohjelmiston, tutustu toimialakohtaisiin ohjelmistoratkaisuihimme; nopeaa ja omaperäistä sivustoa varten tutustu myös verkkosivujen suunnittelu -palveluumme.
