Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Vite v4.0.4, выпущенный 3 января 2023 года, расширяет функциональные возможности среды разработки Vite и выходит всего через пять месяцев после Vite 3. Новая версия включает в себя новые функции и обновления, которые сделают разработку JavaScript быстрее и эффективнее, чем раньше.

Здесь мы обсудим, что такое Vite, важные функции и обновления, найденные в Vite 4.

Что я Вите?

Само слово «витэ» означает «быстрый». Это интерфейсный инструмент сборки и сервер разработки, предназначенный для обеспечения более быстрой, легкой и простой разработки. Он обслуживает ваш код во время разработки, объединяет ваши файлы для производства и позволяет легко интегрироваться с различными Фреймворки и библиотеки 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.

Перед обновлением до накопительного пакета 3 следует обратиться к руководству по миграции с накопительным пакетом, так как могут возникнуть проблемы, хотя накопительный пакет 3 в основном совместим с накопительным пакетом 2.

2. Новый плагин React с использованием Speedy Web Compiler (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.

Плагин vitjs/plugin-реакции

Этот плагин обеспечивает быструю горячую замену модуля при минимальном размере пакета, используя esbuild и Babel. Он также предлагает дополнительную гибкость за счет возможности использования конвейера преобразования Babel.

Горячая замена модуля позволяет обновлять жир. Это позволяет разработчикам обновлять модули в работающем приложении без необходимости обновления всей страницы. Следуйте приведенной ниже демонстрации, чтобы установить плагин в свой проект.

npm установить @vitejs/плагин-реагировать

Следуйте приведенному ниже коду, чтобы импортировать плагин в свой проект;

Импортировать { определить конфигурацию } от'пригласить'
Импортировать реагировать от'@vitejs/плагин-реагировать'
экспортпо умолчанию определить конфигурацию ({
плагины: [реагировать()],
})

Плагин vitejs/plugin-react-swc

Это новый плагин, который использует esbuild во время сборки и Speed ​​Web Compiler во время разработки.

Заменив Babel на SWC, плагин призван значительно ускорить процесс разработки, особенно для проектов, не требующих нестандартных расширений React.

Вот как установить плагин;

npm я @vitejs/плагин-реагировать-swc

Импортируйте его в свой проект следующим образом;

Импортировать { определить конфигурацию } от"пригласить";
Импортировать реагировать от"@vitejs/плагин-реагировать-swc";
экспортпо умолчанию определить конфигурацию ({
плагины: [реагировать()],
});

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 и многое другое.