Izgradite svoje složene web aplikacije u kraćem vremenu, s bržom povratnom spregom, koristeći Vite.

Kako web aplikacije postaju sve bogatije značajkama, potreba za brzim i učinkovitim alatima za izradu i dalje raste.

Vite je moderan alat za izradu koji pruža munjevito brz razvojni poslužitelj i optimiziran proces izrade, omogućujući korisnicima da pojednostave radni proces i poboljšaju iskustvo krajnjeg korisnika.

Istražit ćete kako započeti s Viteom, pokrivajući njegov postupak instalacije, bitne značajke i naredbe sučelja naredbenog retka (CLI).

Inicijalizirajte Vite projekt

Prije nego što možete koristiti Vite, morate instalirati Node.js i Node Package Manager na vašem sustavu. Nakon instaliranja ova dva paketa, možete nastaviti sa stvaranjem projekta s Viteom.

Evo kako inicijalizirati projekt s Viteom koristeći npm:

npm init vite

Kada pokrenete ovu naredbu, ona stvara novi Vite projekt u vašem trenutnom radnom direktoriju. Naredba od vas traži da napravite osnovne konfiguracijske odabire za postavljanje vašeg novog Vite projekta.

instagram viewer

Evo raščlambe opcija koje naredba traži da odaberete:

  1. Naziv projekta. Kada pokrenete naredbu, od vas se traži da navedete naziv za svoj novi projekt. Ime koje navedete također će se pojaviti u paket.json datoteku i služi kao naziv direktorija vašeg projekta.
  2. Odaberite okvir. Ovaj upit tražit će vas da odaberete okvir za svoj projekt. Vite trenutno podržava popularne front-end okvire kao što su React, Vue, Angular i opciju Vanilla za običan JavaScript kod.
  3. Odaberite varijantu. Ovo vas poziva da odaberete varijantu za svoj projekt, koja pokriva alternative kao što su JavaScript i njegov podskup jezik TypeScript.

Nakon što unesete tražene podatke, Vite će generirati novu strukturu projekta u vašem trenutnom radnom direktoriju. Struktura će predstavljati osnovnu postavku projekta, uključujući a paket.json datoteka, a src imenik s an index.html i glavni.js datoteka i a javnost imenik.

Nakon što stvorite strukturu projekta, možete se kretati do direktorija projekta pokretanjem CD . Nakon što to učinite, instalirajte sve dodatne ovisnosti koje vaš projekt može zahtijevati pomoću npm instalirati naredba.

Da biste pokrenuli razvojni poslužitelj i pratili sve promjene napravljene na vašem projektu, pokrenut ćete npm run dev naredba unutar vašeg projektnog terminala.

Značajke Vite

Značajke Vitea usmjerene su na pojednostavljenje procesa izrade i poboljšanje iskustva izrade weba.

Poslužitelj za brzi razvoj

Viteov razvojni poslužitelj koristi izvorne ES module i lijeno učitavanje modula, što omogućuje nevjerojatnu brzinu. To omogućuje brze petlje povratnih informacija i munjevito brzo pokretanje.

Optimizirani proces izrade

Vite je poboljšao svoju proceduru izrade kako bi proizveo optimizirani i minimizirani kod spreman za proizvodnju. Osim toga, stvara datoteku manifesta koja može predmemorirati sredstva za bust i verziju.

Podrška za razne front-end okvire

Vite podržava različite front-end okvire, uključujući Vue i slični okviri poput React Js i Angular Js. To omogućuje razvojnim programerima da odaberu željeni okvir i iskoriste moćne mogućnosti Vitea.

Hot Module Replacement (HMR)

Viteova značajka Hot Module Replacement (HMR) omogućuje brzo i besprijekorno ažuriranje aplikacije bez potrebe za osvježavanjem cijele stranice. To čini razvojni proces bržim i učinkovitijim.

CSS pretprocesiranje i PostCSS integracija

Vite podržava CSS pretprocesiranje, uključujući Sass, Less i Stylus. Također se integrira s PostCSS-om, omogućujući dodatne transformacije i optimizacije CSS-a.

Vite dolazi s mnogim drugim značajkama, uključujući podršku za TypeScript, JSX i WebAssembly. Izlaskom Vite v4.0.4, Viteova zajednica programera je narasla i aktivno održava softver, dodajući redovite nove značajke.

Viteovo sučelje naredbenog retka (CLI)

Viteovo sučelje naredbenog retka (CLI) je zgodan alat za prilagodbu ponašanja Vitea. Omogućuje niz bitnih naredbi koje također pomažu pojednostaviti proces razvoja. Ovdje su neke od ključnih CLI naredbi:

vite graditi

Ova naredba će izgraditi aplikaciju za produkcijsko okruženje, optimizirajući i minimizirajući kod kako bi bila spremna za implementaciju. Pomoću ove naredbe možete osigurati da vaša aplikacija bude što brža i učinkovitija te spremna za distribuciju vašim korisnicima.

vite pregled

Ova vam naredba omogućuje pregled generiranog koda prije nego što ga postavite u proizvodnju. Ako želite osigurati da sve izgleda i radi prema očekivanjima i da nema vidljivih problema ili problema koji zahtijevaju pozornost, ovo je korisna naredba za pokretanje.

vite optimizirati

vite optimizirati dostupan je u Vite 2.6 i novijim verzijama koje analiziraju kod projekta i generiraju optimizirane proizvodne građe izvođenjem stabla protresanje, operacije dijeljenja koda i ugrađivanje malih sredstava izravno u konačnu verziju kako bi se smanjili zahtjevi potrebni za učitavanje aplikacija

vite optimizirati automatski se izvršava tijekom vite graditi naredba, koja generira optimizirane proizvodne verzije. Možete ga pokrenuti i odvojeno da biste provjerili veličinu i izvedbu međugradnje

Viteova konfiguracijska datoteka

U Viteu, konfiguracijska datoteka definira različite opcije za proces izgradnje. Konfiguracijska datoteka Vite koristi JavaScript i sintaksu ES6 modula.

Prema zadanim postavkama, trebali biste imenovati konfiguracijsku datoteku vite.config.js i smjestite ga u korijenski direktorij projekta.

Evo nekih od najčešće korištenih opcija u Vite konfiguracijskoj datoteci:

  • korijen. Određuje korijenski direktorij projekta.
  • poslužitelj. Konfigurira razvojni poslužitelj. Uključuje opcije za konfiguriranje hosta, porta i proxy zahtjeva za API backend.
  • dodaci. Omogućuje dodavanje dodataka u Vite proces izgradnje. Dodatak je funkcija koja na neki način modificira proces izgradnje, kao što je dodavanje podrške za novi format datoteke ili transformacija izvornog koda.
  • odlučnost. Ovo konfigurira kako Vite rješava uvoze u projektu. Uključuje opcije za određivanje aliasa, proširenja i direktorija modula.

Evo primjera Vite konfiguracijske datoteke:

uvoz {defineConfig} iz'vite';
uvoz staza iz'staza';
izvozzadano definiConfig({
 poslužitelj: {
 luka: 3000,
 otvoren: pravi,
 },
 razriješi: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 dodaci: [],
});

Ova konfiguracijska datoteka postavlja osnovni Vite projekt sa:

  • lokalni razvojni poslužitelj koji radi na priključku 3000
  • alias za src imenik
  • nema dodataka

Vite ima snažnu zajednicu

Nekoliko mrežnih izvora vrlo detaljno objašnjava kako koristiti Vite s popularnim okvirima kao što su React, Vue i Angular.

Osim toga, postoji mnoštvo informacija o učinkovitom korištenju Vitea u njegovoj službenoj dokumentaciji. Uz ove dostupne resurse, integracija Vitea u vaš sljedeći projekt je moguća.