Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Vite v4.0.4 uitgebracht op 3 januari 2023 en verbetert de functionaliteiten van de Vite-ontwikkelomgeving en komt slechts vijf maanden na Vite 3. De nieuwe versie wordt geleverd met nieuwe functies en updates die de JavaScript-ontwikkelingservaring sneller en sterker maken dan voorheen.

Hier bespreken we wat Vite is, de belangrijke functies en updates in Vite 4.

Wat is Vite?

Het woord "vite" zelf betekent "snel". Het is een front-end build-tool en ontwikkelserver die is ontworpen om een ​​snellere, lichtgewicht en eenvoudige ontwikkelervaring te bieden. Het bedient uw code tijdens de ontwikkeling, bundelt uw bestanden voor productie en maakt eenvoudige integratie met verschillende JavaScript-frameworks en -bibliotheken, zoals Vue, React, Preact en Svelte.

Vit heeft de afgelopen twee jaar talloze verbeteringen ondergaan en Vite 4 biedt verschillende nieuwe en verbeterde functies.

instagram viewer

1. Oprollen 3

Oprollen is een JavaScript-modulebundelaar waarmee ontwikkelaars verschillende kunnen bundelen JavaScript-modules in één bestand. Dit verbetert op zijn beurt de prestaties van de applicatie door het aantal verzoeken te verminderen dat de browser moet doen om de code te laden.

Vite gebruikt nu Rollup 3 tijdens het bouwen. Vite versie 3 gebruikte Rollup 2, maar na de release van Rollup 3 in oktober 2022 kwam de nieuwe versie van Vite met een grote upgrade naar Rollup 3.

Raadpleeg de Rollup-migratiegids voordat u upgradet naar Rollup 3, aangezien er problemen kunnen optreden, ook al is Rollup 3 grotendeels compatibel met Rollup 2.

2. Nieuwe React-plug-in met behulp van Speedy Web Compiler (SWC)

SWC is een supersnelle JavaScript-compiler geschreven in Rust. SWC en Babel zijn beide JavaScript-compilers die uw code transformeren naar wat wordt ondersteund door browsers, maar SWC beweert sneller te zijn dan Babel.

Sinds Vite v3 Babel gebruikte, komt v4 met de introductie van SWC als vervanging of alternatief, vooral voor React-projecten.

Terwijl Vite Babel blijft ondersteunen, introduceert Vite 4 twee plug-ins (vitejs/plugin-react en vitejs/plugin-react-swc) met verschillende compromissen voor React-projecten.

De plug-in vitejs/plugin-react

Deze plug-in zorgt voor een snelle Hot Module Replacement met minimale pakketgrootte, door gebruik te maken van esbuild en Babel. Het biedt ook de extra flexibiliteit om de Babel-transformatiepijplijn te kunnen gebruiken.

Hot-modulevervanging maakt vetverversing mogelijk. Hiermee kunnen ontwikkelaars modules in een actieve toepassing bijwerken zonder de hele pagina te hoeven vernieuwen. Volg de onderstaande demonstratie om de plug-in in uw project te installeren.

npm install @vitejs/plugin-react

Volg de onderstaande code om de plug-in in uw project te importeren;

importeren { definieerConfig } van'vite'
importeren Reageer van'@vitejs/plugin-reageren'
exporterenstandaard definieerConfig({
plug-ins: [Reageer()],
})

De plug-in vitejs/plugin-react-swc

Dit is een nieuwe plug-in die gebruik maakt van esbuild tijdens het bouwen en Speed ​​Web Compiler tijdens de ontwikkeling.

Door Babel te vervangen door SWC, wil de plug-in het ontwikkelingsproces aanzienlijk versnellen, met name voor projecten waarvoor geen niet-standaard React-extensies nodig zijn.

Hier leest u hoe u de plug-in installeert;

npm i @vitejs/plugin-react-swc

Importeer het als volgt in uw project;

importeren { definieerConfig } van"uitnodigen";
importeren Reageer van"@vitejs/plugin-react-swc";
exporterenstandaard definieerConfig({
plug-ins: [Reageer()],
});

3. CSS importeren als een tekenreeks

Deze functie biedt een oplossing voor Vite 3 CSS dubbel laadgedrag dat optreedt door de standaardexport van een CSS-bestand te importeren, bijvoorbeeld:

importeren cssString van'./global.css

Om dit gedrag te voorkomen, introduceert Vite 4 het gebruik van ?inline query suffix modifier. Hier is een demonstratie van de syntaxis;

importeren cssString van'./global.css? in lijn'

De v3 CSS-standaardexport is daarom afgeschaft.

4. Omgevingsvariabelen

Vite heeft zijn afhankelijkheden op dotenv en dotenv-expand bijgewerkt. De nieuwe versies die worden gebruikt zijn respectievelijk dotenv 16 en dotenv-expand 9. Deze update vereist dat u waarden met de tekens "#" of "`" tussen aanhalingstekens plaatst om de juiste functionaliteit te garanderen. Hier is een voorbeeld;

SECRET_HASH="iets-met-A-#-hash"

Om het bijwerken van ENV-bestanden te vergemakkelijken, heeft Vite het gebruik van de dotenv-opdrachtregelinterface aanbevolen. Dit is een optionele plug-in die ervoor kan zorgen dat ENV-bestanden consistent zijn tussen verschillende machines, omgevingen of teamleden. Het kan helpen om het bijwerken van ENV-bestanden minder vervelend te maken.

Andere upgrades, oplossingen en migratie naar Vite v4.0.4

Vite heeft meer snelkoppelingen voor de opdrachtregelinterface toegevoegd. Druk op om een ​​lijst met alle snelkoppelingen te zien H tijdens de ontwikkeling.

De moderne browserversie is nu ook standaard gericht op safari14 voor bredere ES2020-compatibiliteit. Er is ondersteuning voor patch-pakketten bij het vooraf bundelen van afhankelijkheden, er zijn verbeterde foutmeldingen tijdens SSR en nog veel meer.