Автор Дэвид Нвадиогбу
Популярность Vite.js в сообществе разработчиков значительно возросла с момента его первого релиза. С более чем 1 миллионом загрузок с npm в неделю и возглавляя список библиотек в исследовании 2021 года State of JS, произошло восстание, так как все больше и больше фреймворков теперь принимают Vite в качестве инструментария по умолчанию.
Nuxt 3 использует Vite по умолчанию, и совсем недавно его примеру последовал Laravel. Среди довольно новых фреймворков, которые также построены на Vite, — Sveltekit, Astro, Hydrogen и SolidStart. Можно с уверенностью сказать, что Vite стал невероятно значимым в экосистеме разработки фронтенда.
Спустя 16 месяцев после выхода 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 Module (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.
Также теперь доступен официальный перевод документации на испанский язык, в дополнение к предыдущим переводам на китайский и японский языки.
Стартовые шаблоны Create Vite
Шаблоны create-vite — это наиболее простой вариант быстрого тестирования Vite с выбранным вами фреймворком. Vite 3 предоставляет новую тему для всех шаблонов в соответствии с новой документацией. Ознакомьтесь с ними здесь:
- Vue
- React
- Svelte
- Preact
- Lit
Эта тема является общей для всех шаблонов, чтобы служить минимальной отправной точкой для работы с Vite. Однако, если вы хотите получить более полное решение, включающее линтинг, настройку тестирования и другие возможности, такие фреймворки, как Vue и Svelte, имеют официальные шаблоны с поддержкой Vite. Список шаблонов, поддерживаемых сообществом, можно найти здесь: Awesome Vite .
Dev & Build Improvements
Давайте рассмотрим некоторые другие улучшения, которые были внесены в процесс разработки и сборки в Vite 3.
- Vite CLI: Vite CLI был эстетически обновлен, а порт сервера по умолчанию теперь 5173, сервер предварительного просмотра слушает 4173. Это гарантирует, что Vite будет избегать столкновений с другими инструментами.
- Улучшения холодного запуска: Vite теперь избегает полной перезагрузки во время холодного старта, когда импорты внедряются плагинами, при этом просматривая начальные статически импортируемые модули.
- import.meta.glob: Обновления в import.meta.glob, такие как именованный импорт и пользовательские запросы, были добавлены в V3. Подробнее о новых возможностях вы можете прочитать в руководстве по импорту 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/15 Node.js больше не поддерживаются.
Поддержка браузеров: Vite теперь нацелен на браузеры, поддерживающие встроенные ES-модули, встроенный динамический импорт ESM и import.meta.
К таким браузерам относятся:
- Chrome >=87
- Firefox >=78
- Safari >=13
- Edge >=88
Только небольшой части пользователей потребуется использовать @vitejs/plugin-legacy , который будет автоматически генерировать унаследованные фрагменты и соответствующие полифиллы для языка ES.
Изменения опций конфигурации: Обратите внимание на следующие опции конфигурации, которые уже были устаревшими в V2 и теперь удалены в V3.
- alias (переключиться на resolve.alias)
- dedupe (переключиться на resolve.dedupe)
- build.base (переключиться на 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
Если вы заинтересованы в более глубоком изучении Vite, обратите внимание на курс Vue Mastery «Молниеносные сборки с Vite», который ведет его создатель Эван Ю.
Рост Vite был бы невозможен без совокупных усилий команды Vite Team и сопровождающих экосистемы, упорно работающих над ее постоянным улучшением. Если вы заинтересованы в улучшении Vite, лучший способ начать — помочь выявить и исправить проблемы, присоединиться к discord и внести свой вклад в документацию или помочь создать плагины, которые улучшат DX Vite.
Первоначально опубликовано на https://www.vuemastery.com 25 июля 2022 года.