Jak skonfigurować aplikację React za pomocą Vite

Jak skonfigurować aplikację React za pomocą Vite
Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Rozpoczynając nowy projekt React, wielu programistów zwraca się do twórz-reaguj-aplikację jako podstawowe narzędzie poleceń do instalacji i konfiguracji projektu. Jednak Vite jest lepszą alternatywą. Oferuje krótszy czas programowania i lepszą wydajność.





Co to jest Vite?

Vite to narzędzie do budowania i serwer programistyczny zaprojektowany w celu usprawnienia procesu tworzenia nowoczesnych aplikacji internetowych. Robi to, dzieląc moduły aplikacji na zależności i kod źródłowy. Zależności to moduły, które nie zmieniają się często, podczas gdy kod źródłowy jest zwykle często edytowany podczas programowania.





potrzebujesz miejsca na nocleg za darmo?
WYKORZYSTAJ WIDEO DNIA PRZEWIŃ, ABY KONTYNUOWAĆ TREŚĆ

Vite używa esbuild , program pakujący oparty na Go, który jest znacznie szybszy niż tradycyjne programy pakujące oparte na JavaScript, aby przyspieszyć proces kompilacji kodu źródłowego. Łączy również wstępnie zależności aplikacji i obsługuje kod źródłowy przez natywny ESM, umożliwiając przeglądarkom optymalizację ładowania modułów w celu wydajniejszego i szybszego działania aplikacji. Kiedy przychodzi czas na wdrożenie aplikacji do produkcji, Vite ma wbudowane polecenie kompilacji, które automatycznie optymalizuje aplikację do wdrożenia, zapewniając płynne działanie aplikacji.





Tworzenie projektu Vite

Przed utworzeniem projektu Vite pamiętaj, że Vite wymaga Node.js w wersji 14.18+ lub 16+. Możesz zapoznać się z tymi artykułami, aby zainstalować Node na komputerze z systemem Windows lub Ubuntu.

  • Jak zainstaluj Node.js w systemie Windows .
  • Uczyć się jak zainstalować Npm i Node.js na Ubuntu

Utwórz projekt Vite, uruchamiając to polecenie w terminalu.



 npm create vite@latest 

Po rozpoczęciu wykonywania polecenia zostaniesz poproszony o podanie nazwy projektu. Wpisz nazwę swojego projektu i kliknij Enter.

co znaczy rozwijać się na Twitterze

Następnie Vite poprosi o wybranie struktury. Wybierz Reaguj.





Vite poprosi Cię również o wybranie wariantu. Wybierz JavaScript.

 Terminal pokazujący opcje Vite do tworzenia aplikacji React

Kiedy Vite zakończy tworzenie szkieletu projektu, przejdź do utworzonego przez niego katalogu i zainstaluj zależności za pośrednictwem npm.





 npm install 

Aby uruchomić projekt, użyj tego polecenia:

emulator mac os x dla windows
 npm run dev 

To powinna być strona główna.

 Strona główna aplikacji React utworzonej za pomocą Vite

Możesz rozpocząć edycję projektu, a zmiany zostaną odzwierciedlone w przeglądarce.

Użyj Vite, aby uzyskać dużą szybkość programowania

CRA (create-react-app) jest zwykle domyślnym narzędziem do ustawiania struktury projektu i konfiguracji dla aplikacji React. Jest to wygodne, ponieważ wszystko jest skonfigurowane dla Ciebie, ale budowanie i ponowne ładowanie podczas programowania może być powolne.

Z drugiej strony Vite używa natywnych modułów ES w przeglądarce, aby zapewnić szybsze czasy kompilacji. Jeśli nie chcesz używać Vite, możesz wybrać metaframework React, taki jak Next.js, ponieważ jest on również zaprojektowany z myślą o wysokiej wydajności.