Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Vite v4.0.4, издаден на 3 януари 2023 г., подобрява функционалностите на средата за разработка на Vite и идва само пет месеца след Vite 3. Новата версия идва с нови функции и актуализации, които ще направят изживяването при разработка на JavaScript по-бързо и по-силно от преди.

Тук ще обсъдим какво е Vite, важните функции и актуализации, открити във Vite 4.

Какво iI Vite?

Самата дума "vite" означава "бързо". Това е инструмент за изграждане на предния край и сървър за разработка, който е проектиран да осигури по-бързо, леко и просто изживяване при разработка. Той обслужва вашия код по време на разработка, обединява вашите файлове за производство и позволява лесна интеграция с различни JavaScript рамки и библиотеки, като Vue, React, Preact и Svelte.

Вите претърпя множество подобрения през последните две години и Vite 4 носи няколко нови и подобрени функции.

instagram viewer

1. Сборен пакет 3

Навивам е модул за групиране на JavaScript, който позволява на разработчиците да групират различни JavaScript модули в един файл. Това от своя страна подобрява производителността на приложението, като намалява броя на заявките, които браузърът трябва да направи, за да зареди кода.

Vite вече използва Rollup 3 по време на компилация. Vite версия 3 използва Rollup 2, но след пускането на Rollup 3 през октомври 2022 г., новата версия на Vite дойде с основно надграждане до Rollup 3.

Трябва да се обърнете към ръководството за миграция на Rollup, преди да надстроите до Rollup 3, тъй като може да възникнат проблеми, въпреки че Rollup 3 е съвместим предимно с Rollup 2.

2. Нова приставка за React, използваща Speedy Web Compiler (SWC)

SWC е супер бърз компилатор на JavaScript, написан на Rust. SWC и Бабел са и двата компилатора на JavaScript, които трансформират кода ви в това, което се поддържа от браузърите, но SWC твърди, че е по-бърз от Babel.

Тъй като Vite v3 използва Babel, v4 идва с въвеждането на SWC като заместител или алтернатива, особено за React проекти.

Докато Vite продължава да поддържа Babel, Vite 4 въвежда два плъгина (vitejs/plugin-react и vitejs/plugin-react-swc) с различни компромиси за React проекти.

Плъгинът vitejs/plugin-react

Този плъгин осигурява бърза подмяна на горещи модули, като използва минимален размер на пакета, като използва esbuild и Babel. Той също така предлага допълнителната гъвкавост да можете да използвате конвейера за трансформация на Babel.

Горещата подмяна на модула позволява опресняване на мазнините. Тя позволява на разработчиците да актуализират модули в работещо приложение, без да се налага да опресняват цялата страница. Следвайте демонстрацията по-долу, за да инсталирате приставката във вашия проект.

npm инсталирайте @vitejs/plugin-react

Следвайте кода по-долу, за да импортирате приставката във вашия проект;

импортиране {defineConfig} от"кани"
импортиране реагират от„@vitejs/plugin-react“
износпо подразбиране defineConfig({
добавки: [реагира()],
})

Приставката vitejs/plugin-react-swc

Това е нов плъгин, който използва esbuild по време на изграждане и Speed ​​Web Compiler по време на разработка.

Чрез замяната на Babel със SWC, плъгинът има за цел значително да ускори процеса на разработка, особено за проекти, които не изискват нестандартни разширения на React.

Ето как да инсталирате плъгина;

npm в @vitejs/plugin-react-swc

Импортирайте го във вашия проект, както следва;

импортиране {defineConfig} от"вийте";
импортиране реагират от"@vitejs/plugin-react-swc";
износпо подразбиране defineConfig({
добавки: [реагира()],
});

3. Импортиране на CSS като низ

Тази функция дава решение на поведението на Vite 3 при двойно зареждане на CSS, което възниква чрез импортиране на експортирането по подразбиране на CSS файл, напр.:

импортиране cssString от'./global.css

За да предотврати това поведение, Vite 4 въвежда използването на модификатор на суфикса на вградена заявка. Ето демонстрация на синтаксиса;

импортиране cssString от'./global.css? в редица'

Ето защо износът на v3 CSS по подразбиране е отхвърлен.

4. Променливи на средата

Vite актуализира своите зависимости от dotenv и dotenv-expand. Използваните нови версии са съответно dotenv 16 и dotenv-expand 9. Тази актуализация ще изисква да обвиете стойности, които включват знаците "#" или "`" в кавички, за да се осигури правилна функционалност. Ето един пример;

SECRET_HASH="нещо-с-а-#-хеш"

За да улесни процеса на актуализиране на ENV файлове, Vite препоръча използването на интерфейса на командния ред dotenv. Това е допълнителен плъгин, който може да помогне да се гарантира, че ENV файловете са последователни в различни машини, среди или членове на екипа. Може да направи процеса на актуализиране на ENV файлове по-малко досаден.

Други надстройки, корекции и мигриране към Vite v4.0.4

Vite добави още преки пътища към интерфейса на командния ред. За да видите списък с всички преки пътища, натиснете ч по време на разработката.

Съвременната версия на браузъра вече е насочена към safari14 по подразбиране за по-широка съвместимост с ES2020. Има поддръжка за patch-package при предварително групиране на зависимости, има подобрени съобщения за грешки по време на SSR и много повече.