Pierwsze kroki z Vite: najlepsze narzędzie do budowania

W miarę jak aplikacje internetowe stają się bogatsze w funkcje, zapotrzebowanie na szybkie i wydajne narzędzia do tworzenia wciąż rośnie.

Vite to nowoczesne narzędzie do budowania, które zapewnia błyskawiczny serwer programistyczny i zoptymalizowany proces kompilacji, umożliwiając użytkownikom usprawnienie przepływu pracy i poprawę doświadczenia użytkownika końcowego.

Dowiesz się, jak rozpocząć pracę z Vite, omawiając proces instalacji, podstawowe funkcje i polecenia interfejsu wiersza poleceń (CLI).

Zainicjuj projekt Vite

Zanim będziesz mógł użyć Wit, musisz zainstalować Node.js i Node Package Manager w twoim systemie. Po zainstalowaniu tych dwóch pakietów możesz przystąpić do tworzenia projektu za pomocą Vite.

Oto jak zainicjować projekt za pomocą Vite przy użyciu npm:

npm init vite

Uruchomienie tego polecenia powoduje utworzenie nowego projektu Vite w bieżącym katalogu roboczym. Polecenie monituje o dokonanie podstawowych wyborów konfiguracyjnych w celu skonfigurowania nowego projektu Vite.

Oto zestawienie opcji, o wybranie których monituje polecenie:

1. Nazwa projektu. Po uruchomieniu polecenia pojawi się monit o podanie nazwy nowego projektu. Podana nazwa pojawi się również w pliku pakiet.json plik i służy jako nazwa katalogu twojego projektu.
2. Wybierz ramkę. Ten monit poprosi Cię o wybranie struktury dla twojego projektu. Vite obsługuje obecnie popularne frameworki front-end, takie jak React, Vue, Angular i opcję Vanilla dla zwykłego kodu JavaScript.
3. Wybierz wariant. Zostaniesz poproszony o wybranie wariantu dla swojego projektu, obejmującego alternatywy, takie jak JavaScript i jego podzbiór języka TypeScript.

Po podaniu wymaganych informacji Vite wygeneruje nową strukturę projektu w bieżącym katalogu roboczym. Struktura będzie reprezentować podstawową konfigurację projektu, w tym a pakiet.json Plik a źródło katalog z indeks.html I main.js plik i A publiczny informator.

Po utworzeniu struktury projektu możesz przejść do katalogu projektu, uruchamiając płyta CD . Gdy to zrobisz, zainstaluj wszelkie dodatkowe zależności, których może wymagać Twój projekt przy użyciu instalacja npm Komenda.

Aby uruchomić serwer programistyczny i monitorować wszelkie zmiany wprowadzane w projekcie, uruchomisz plik npm uruchom dev polecenie w terminalu projektu.

Cechy Vita

Funkcje Vite koncentrują się na usprawnieniu procesu kompilacji i ulepszeniu procesu tworzenia stron internetowych.

Serwer szybkiego rozwoju

Serwer programistyczny Vite wykorzystuje natywne moduły ES i leniwe ładowanie modułów, zapewniając niesamowitą szybkość. Pozwala to na szybkie pętle sprzężenia zwrotnego i błyskawiczne czasy uruchamiania.

Zoptymalizowany proces kompilacji

Firma Vite udoskonaliła swoją procedurę kompilacji, aby stworzyć gotowy do produkcji, zoptymalizowany i zminimalizowany kod. Ponadto tworzy plik manifestu, który może buforować zasoby pominięcia i wersji.

Wsparcie dla różnych frameworków front-endowych

Vite obsługuje różne frameworki front-end, w tym Vue i podobne frameworki, takie jak React Js i Angular Js. Pozwala to programistom wybrać preferowaną platformę i wykorzystać potężne możliwości Vite.

Wymiana gorącego modułu (HMR)

Funkcja Hot Module Replacement (HMR) firmy Vite umożliwia szybkie i bezproblemowe aktualizacje aplikacji bez konieczności odświeżania całej strony. Dzięki temu proces rozwoju jest szybszy i bardziej wydajny.

Wstępne przetwarzanie CSS i integracja PostCSS

Vite obsługuje wstępne przetwarzanie CSS, w tym Sass, Less i Stylus. Integruje się również z PostCSS, umożliwiając dodatkowe przekształcenia i optymalizacje CSS.

Vite oferuje wiele innych funkcji, w tym obsługę TypeScript, JSX i WebAssembly. Wraz z wydaniem Vite v4.0.4, społeczność programistów Vite rozrosła się i aktywnie utrzymuje oprogramowanie, regularnie dodając nowe funkcje.

Interfejs wiersza poleceń (CLI) Vite

Interfejs wiersza poleceń (CLI) Vite to przydatne narzędzie do dostosowywania zachowania Vite. Zapewnia szereg podstawowych poleceń, które również pomagają usprawnić proces programowania. Oto niektóre z kluczowych poleceń CLI:

vite build

To polecenie zbuduje aplikację dla środowiska produkcyjnego, optymalizując i minimalizując kod, aby była gotowa do wdrożenia. Korzystając z tego polecenia, możesz upewnić się, że Twoja aplikacja jest tak szybka i efektywna, jak to tylko możliwe i gotowa do dystrybucji wśród użytkowników.

podgląd vita

To polecenie umożliwia wyświetlenie podglądu wygenerowanego kodu przed wdrożeniem go w środowisku produkcyjnym. Jeśli chcesz mieć pewność, że wszystko wygląda i działa zgodnie z oczekiwaniami i nie ma widocznych problemów lub problemów wymagających uwagi, jest to pomocne polecenie do uruchomienia.

zoptymalizuj

zoptymalizuj jest dostępny w Vite 2.6 i nowszych wersjach, które analizują kod projektu i generują zoptymalizowane kompilacje produkcyjne, wykonując drzewo wstrząsanie, operacje dzielenia kodu i osadzanie małych zasobów bezpośrednio w ostatecznej kompilacji, aby zmniejszyć liczbę żądań potrzebnych do załadowania aplikacja.

zoptymalizuj automatycznie wykonuje się podczas vite build polecenie, które generuje zoptymalizowane kompilacje produkcyjne. Możesz także uruchomić go osobno, aby sprawdzić rozmiar kompilacji i wydajność

Plik konfiguracyjny Vite

W Vite plik konfiguracyjny definiuje różne opcje procesu kompilacji. Plik konfiguracyjny Vite wykorzystuje JavaScript i składnię modułów ES6.

Domyślnie powinieneś nazwać swój plik konfiguracyjny vite.config.js i umieść go w katalogu głównym projektu.

Oto niektóre z najczęściej używanych opcji w pliku konfiguracyjnym Vite:

• źródło. Określa katalog główny projektu.
• serwer. Konfiguruje serwer deweloperski. Zawiera opcje konfigurowania żądań hosta, portu i proxy do zaplecza API.
• wtyczki. Umożliwia dodawanie wtyczek do procesu kompilacji Vite. Wtyczka to funkcja, która w pewien sposób modyfikuje proces kompilacji, na przykład dodając obsługę nowego formatu pliku lub przekształcając kod źródłowy.
• rozstrzygać. To konfiguruje sposób, w jaki Vite rozwiązuje importy w projekcie. Zawiera opcje określania aliasów, rozszerzeń i katalogów modułów.

Oto przykład pliku konfiguracyjnego Vite:

import { zdefiniujkonfigurację} z„witać”;
import ścieżka z'ścieżka';
eksportdomyślny zdefiniujkonfigurację({
 serwer: {
 Port: 3000,
 otwarty: PRAWDA,
 },
 rozstrzygać: {
 Alias: {
'@': path.resolve (__nazwa_katalogu, './źródło'),
 },
 },
 wtyczki: [],
});

Ten plik konfiguracyjny konfiguruje podstawowy projekt Vite z:

• lokalny serwer programistyczny działający na porcie 3000
• pseudonim dla źródło informator
• bez wtyczek

Vite ma silną społeczność

Kilka zasobów online szczegółowo wyjaśnia, jak używać Vite z popularnymi frameworkami, takimi jak React, Vue i Angular.

Ponadto w oficjalnej dokumentacji Vite znajduje się mnóstwo informacji na temat efektywnego korzystania z Vite. Dzięki tym dostępnym zasobom możliwa jest integracja Vite z następnym projektem.