Вите 3 уже здесь! Что нового + как мигрировать

Популярность Vite.js в сообществе разработчиков чрезвычайно возросла с момента его первого выпуска. С более чем 1 миллионом загрузок npm в неделю и возглавив список библиотек для опроса о состоянии JS в 2021 году, возникло восстание, поскольку все больше и больше фреймворков теперь используют Vite в качестве инструмента по умолчанию. вариант.

Nuxt 3 использует Vite по умолчанию, а совсем недавно Laravel последовал его примеру. Некоторые довольно новые фреймворки, которые также созданы в Vite, включают Sveltekit, Astro, Hydrogen и SolidStart. Можно с уверенностью сказать, что Vite стал невероятно важным в экосистеме разработки интерфейса.

Через шестнадцать месяцев после выпуска Vite 2 команда Vite недавно объявила о выпуске Vite 3. Основные выпуски Vite производятся не реже одного раза в год, чтобы соответствовать окончанию срока службы версий Node.js, а также регулярно проверяйте API Vite, что существенно сокращает путь миграции для проектов в экосистеме.

В этой статье мы расскажем о некоторых основных обновлениях, которые приходят с Vite 3, и обсудим, как перейти с Vite 2 на Vite 3.

Основные обновления Vite 3

Обновление совместимости и модулей ES

Vite больше не поддерживает Node v12, который достиг своего EOL. Теперь для работы Vite требуется Node 14.18+.

Vite теперь публикуется как модуль ECMAScript (ESM) с прокси-сервером CJS для записи ESM для совместимости. Это отличная новость для всех, особенно для любителей ESM, так как это гарантирует более удобный для разработчиков опыт. Кроме того, базовая версия современного браузера теперь нацелена на браузеры, которые поддерживают собственные модули ES и динамический импорт собственного ESM и import.meta

Новые документы Vite

Vite 3 поставляется с совершенно новым обновляющимся внешним видом документации, созданным с Vitepress в качестве темы по умолчанию. Vitepress — это новый генератор статических сайтов на базе Vite + Vue. Он призван стать простой, мощной и производительной структурой генератора статических сайтов и других сайтов, таких как Vitest, vite-plugin-pwa и VitePress созданы с использованием Vitepress.

Документы Vite 2 по-прежнему доступны на v2.vitejs.dev, и теперь есть новый поддомен на main.vitejs.dev, где каждая фиксация в основной ветке Vite развертывается автоматически. Это полезно иметь при тестировании бета-версий Vite.

Также теперь доступен официальный испанский перевод документов, дополняющий предыдущие китайский и японский переводы.

Создание стартовых шаблонов Vite

Шаблоны create-vite — это самый простой способ быстро протестировать vite с выбранным вами фреймворком. Vite 3 предоставляет новую тему для всех шаблонов в соответствии с новыми документами. Проверьте их здесь:

Эта тема является общей для всех шаблонов и служит минимальной отправной точкой для Vite. Однако, если вам нужно более полное решение, включающее линтинг, настройку тестирования и другие функции, у таких фреймворков, как Vue и Svelte, есть официальные шаблоны на базе Vite. Список поддерживаемых сообществом шаблонов можно найти здесь: Awesome Vite.

Улучшения разработки и сборки

Давайте взглянем на некоторые другие улучшения, которые были внесены в процесс разработки/сборки в Vite 3.

Vite CLI: Vite CLI был эстетически обновлен, и его порт сервера по умолчанию теперь 5173, а сервер предварительного просмотра прослушивает 4173. Это гарантирует, что Vite избежит столкновений с другими инструментами.

Улучшения холодного запуска: Vite теперь избегает полной перезагрузки во время холодного запуска, когда импорт вводится плагинами при сканировании исходных статически импортированных модулей.
import.meta.glob: в версии 3 были добавлены обновления import.meta.glob, такие как именованный импорт и пользовательские запросы. Подробнее о новых возможностях можно прочитать в Руководстве по импорту Glob
Импорт WebAssembly. API импорта WebAssembly был пересмотрен, чтобы избежать конфликтов с будущими стандартами и сделать его более гибким. Подробнее читайте в Руководстве по WebAssembly
Улучшена поддержка связанной базы: Vite 3 теперь правильно поддерживает относительную базу (с использованием base: ''), позволяя развертывать созданные активы на разных базах без повторной сборки. Это полезно, когда база неизвестна во время сборки, например, при развертывании в сетях с адресацией контента, таких как IPFS.
Уменьшение размера пакета: Vite 3 может похвастаться 30-процентным уменьшением размера публикации по сравнению с его предшественником (Vite 2).

Переход с Vite 2 на Vite 3

Хотя Vite 3 был анонсирован совсем недавно, большинство фреймворков в экосистеме уже мигрируют. Команда Vite собрала vite-ecosystem-ci, чтобы запускать CI от ведущих игроков в экосистеме в сравнении с основной ветвью Vite, а также получать своевременные отчеты перед введением регрессии.

Переход с Vite 2 на Vite 3 должен выглядеть так же, как обновление зависимости. Чтобы успешно перейти на Vite 3, убедитесь, что вы учли следующее:

Поддержка Node.js: убедитесь, что у вас установлен Node.js 14.18+/16+. Версии 12/13/15 Node.js больше не поддерживаются.

Поддержка браузера: Vite теперь ориентирован на браузеры, которые поддерживают собственные модули ES, собственный динамический импорт ESM и импорт .meta

К таким браузерам относятся:

Хром ›=87
Фаерфокс ›=78
Сафари ›=13
Край ›=88

Лишь небольшой части пользователей потребуется использовать @vitejs/plugin-legacy, который будет автоматически генерировать устаревшие фрагменты и соответствующие полифиллы функций языка ES.

Изменения параметров конфигурации: обратите внимание на следующие параметры конфигурации, которые уже устарели в версии 2 и теперь удалены в версии 3.

alias (переключиться на resolve.alias)
dedupe (переключиться на resolve.dedupe)
build.base (переключиться на базу)
build.brotliSize (переключиться на build.reportCompressedSize)
build.cleanCssOptions (теперь Vite использует esbuild для минимизации CSS)
build.polyfillDynamicImport (используйте @vitejs/plugin-legacy для браузеров без поддержки динамического импорта)
optimizeDeps.keepNames (переключитесь на optimizeDeps.esbuildOptions.keepNames)

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

Освоение Вайта

Если вы хотите глубже погрузиться в Vite, ознакомьтесь с курсом Vue Mastery Молниеносные сборки с Vite, который преподает его создатель Эван Ю.

Рост Vite был бы невозможен без совместных усилий команды Vite и специалистов по поддержке экосистемы, которые постоянно работали над его улучшением. Если вы заинтересованы в том, чтобы помочь улучшить Vite, лучший способ начать — помочь выявить и исправить проблемы, присоединиться к раздору и внести свой вклад в документацию или помочь создать плагины, которые улучшат DX Vite.

Первоначально опубликовано на https://www.vuemastery.com 25 июля 2022 г.

Вите 3 уже здесь! Что нового + как мигрировать