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.

Vite v4.0.4 wydany 3 stycznia 2023 r., rozszerzający funkcjonalność środowiska programistycznego Vite i dostępny zaledwie pięć miesięcy po Vite 3. Nowa wersja zawiera nowe funkcje i aktualizacje, które sprawią, że programowanie w języku JavaScript będzie szybsze i skuteczniejsze niż wcześniej.

Tutaj omówimy, czym jest Vite, istotne funkcje i aktualizacje znalezione w Vite 4.

Co mam na myśli?

Samo słowo „vite” oznacza „szybko”. Jest to front-endowe narzędzie do budowania i serwer programistyczny, które zostało zaprojektowane w celu zapewnienia szybszego, lekkiego i prostego środowiska programistycznego. Obsługuje twój kod podczas programowania, łączy twoje pliki do produkcji i umożliwia łatwą integrację z różnymi Frameworki i biblioteki JavaScript, takich jak Vue, React, Preact i Svelte.

Wit przeszedł wiele ulepszeń w ciągu ostatnich dwóch lat, a Vite 4 przynosi kilka nowych i ulepszonych funkcji.

instagram viewer

1. Podsumowanie 3

Podsumowanie to pakiet modułów JavaScript, który umożliwia programistom łączenie różnych moduły JavaScriptu w jeden plik. To z kolei poprawia wydajność aplikacji, zmniejszając liczbę żądań, które przeglądarka musi wykonać, aby załadować kod.

Vite używa teraz pakietu zbiorczego 3 w czasie kompilacji. Vite w wersji 3 korzystał z pakietu zbiorczego 2, ale po wydaniu pakietu zbiorczego 3 w październiku 2022 r. Nowa wersja Vite zawierała znaczną aktualizację do pakietu zbiorczego 3.

Przed uaktualnieniem do pakietu zbiorczego 3 należy zapoznać się z przewodnikiem migracji zbiorczej, ponieważ mogą wystąpić problemy, mimo że pakiet zbiorczy 3 jest w większości zgodny z pakietem zbiorczym 2.

2. Nowa wtyczka React wykorzystująca Speedy Web Compiler (SWC)

SWC to superszybki kompilator JavaScript napisany w języku Rust. SWC i Babel oba są kompilatorami JavaScript, które przekształcają twój kod do tego, co jest obsługiwane przez przeglądarki, ale SWC twierdzi, że jest szybszy niż Babel.

Ponieważ Vite v3 używał Babel, v4 jest wprowadzany wraz z wprowadzeniem SWC jako zamiennika lub alternatywy, szczególnie dla projektów React.

Podczas gdy Vite nadal obsługuje Babel, Vite 4 wprowadza dwie wtyczki (vitejs/plugin-react i vitejs/plugin-react-swc) z różnymi kompromisami dla projektów React.

Wtyczka vitejs/plugin-react

Ta wtyczka zapewnia szybką wymianę modułu podczas pracy przy minimalnym rozmiarze pakietu, przy użyciu esbuild i Babel. Oferuje również dodatkową elastyczność, jaką jest możliwość korzystania z potoku transformacji Babel.

Wymiana modułu na gorąco umożliwia odświeżenie tłuszczu. Pozwala programistom aktualizować moduły w działającej aplikacji bez konieczności odświeżania całej strony. Postępuj zgodnie z poniższą demonstracją, aby zainstalować wtyczkę w swoim projekcie.

npm zainstaluj @vitejs/plugin-react

Postępuj zgodnie z poniższym kodem, aby zaimportować wtyczkę do swojego projektu;

import { zdefiniujkonfigurację} z„witać”
import reagować z'@vitejs/plugin-react'
eksportdomyślny zdefiniujkonfigurację({
wtyczki: [reagować()],
})

Wtyczka vitejs/plugin-react-swc

Jest to nowa wtyczka, która wykorzystuje esbuild podczas kompilacji i Speed ​​Web Compiler podczas programowania.

Zastępując Babel SWC, wtyczka ma na celu znaczne przyspieszenie procesu rozwoju, szczególnie w przypadku projektów, które nie wymagają niestandardowych rozszerzeń React.

Oto jak zainstalować wtyczkę;

npm i @vitejs/plugin-react-swc

Zaimportuj go do swojego projektu w następujący sposób;

import { zdefiniujkonfigurację} z„witać”;
import reagować z"@vitejs/plugin-react-swc";
eksportdomyślny zdefiniujkonfigurację({
wtyczki: [reagować()],
});

3. Importowanie CSS jako ciągu znaków

Ta funkcja zapewnia rozwiązanie problemu podwójnego ładowania CSS Vite 3, które występuje poprzez importowanie domyślnego eksportu pliku CSS, np.:

import cssString z'./global.css

Aby zapobiec takiemu zachowaniu, Vite 4 wprowadza użycie modyfikatora sufiksu zapytania wbudowanego. Oto demonstracja składni;

import cssString z'./global.css? wbudowany'

W związku z tym domyślny eksport CSS w wersji 3 został wycofany.

4. Zmienne środowiska

Vite zaktualizował swoje zależności od dotenv i dotenv-expand. Nowe używane wersje to odpowiednio dotenv 16 i dotenv-expand 9. Ta aktualizacja będzie wymagać umieszczenia wartości zawierających znaki „#” lub „`” w cudzysłowach, aby zapewnić prawidłowe działanie. Oto przykład;

SECRET_HASH="coś-z-A-#-haszysz"

Aby ułatwić proces aktualizacji plików ENV, Vite zalecił użycie interfejsu wiersza poleceń dotenv. Jest to opcjonalna wtyczka, która może pomóc zapewnić spójność plików ENV na różnych komputerach, środowiskach lub członkach zespołu. Może sprawić, że proces aktualizacji plików ENV będzie mniej uciążliwy.

Inne aktualizacje, poprawki i migracja do Vite v4.0.4

Vite dodał więcej skrótów interfejsu wiersza poleceń. Aby zobaczyć listę wszystkich skrótów, naciśnij H w trakcie rozwoju.

Nowoczesna wersja przeglądarki jest teraz domyślnie ukierunkowana na safari14 w celu zapewnienia szerszej kompatybilności z ES2020. Istnieje wsparcie dla pakietu poprawek podczas wstępnego łączenia zależności, są ulepszone komunikaty o błędach podczas SSR i wiele więcej.