Vite 6.0: Новые возможности и будущее веб-разработки
26 ноября 2024 года вышла новая мажорная версия инструмента для сборки приложений Vite. Это событие особенно примечательно тем, что это первый релиз после анонса VoidZero, где Even You представил грядущее направление развития основных продуктов.
Ключевые события за год с релиза версии 5:
Увеличение загрузок:
Количество загрузок в неделю увеличилось с 7.5 миллионов до 17 миллионов.Развитие Vitest:
Vitest также стал завоевывать новые горизонты, формируя вокруг себя экосистему. Например, StoryBook выпустил новый инструментарий для тестов на базе Vitest.Присоединение фреймворков:
Множество фреймворков присоединились к экосистеме сборщика, такие как TanStack Start, One, Ember и другие.Использование в крупных компаниях:
Множество крупных компаний официально стали использовать Vite в своём стеке. Полный список компаний можно посмотреть здесь.
Эти достижения показывают, что Vite стал популярным и важным инструментом для сборки веб-приложений среди разработчиков.
График загрузок Vite
Список основных изменений
Эван обещает нам самый большой и значимый релиз после Vite 2. Давайте посмотрим, что нам предлагают:
Новое экспериментальное API для переменных окружения
Обновление поддержки версий Node.js
Значение по умолчанию для resolve.conditions
JSON stringify
Расширенная поддержка ссылок на ассеты в элементах HTML
postcss-load-config
Sass теперь использует modern API по умолчанию
Кастомизация CSS названий файлов на выходе в library mode
Теперь рассмотрим каждое обновление более детально.
Новое экспериментальное API для переменных окружения
В Vite 6 формализована концепция окружений. До Vite 5 существовало два неявных окружения (клиентское и опционально ssr). Новый API Environment позволяет пользователям и авторам фреймворков создавать столько окружений, сколько необходимо для отображения того, как их приложения работают в продакшене. Эта новая возможность потребовала большого внутреннего рефакторинга, при этом много усилий было направлено на обратную совместимость. Первоначальная цель Vite 6 — как можно более плавно перевести экосистему на новый крупный релиз. Для этого откладывается принятие новых экспериментальных API до тех пор, пока достаточное количество пользователей не перейдут на них и авторы фреймворков и плагинов не проверят новый дизайн.
Для простых SPA/MPA конфигурация остается похожей на Vite 5, с внутренней обработкой клиентской среды; более сложные приложения могут явно настраивать несколько сред, используя опцию настройки среды.
API обеспечивает обратную совместимость с Vite 5, поддерживая существующие серверные API и вводя новые API для среды для плагинов и фреймворков.
Подробнее об устройстве нового API можно почитать тут.
Схема работы dev сервера vite
Обновление поддержки версий Node.js
Vite 6 поддерживает Node.js 18, 20 и 22+, как и Vite 5. Поддержка Node.js 21 была прекращена. Vite прекращает поддержку Node.js для старых версий после их EOL. Node.js 18 EOL наступит в конце апреля 2025 года, после чего авторы Vite выпустят новый major релиз, чтобы увеличить требуемую версию Node.js.
Значение по умолчанию для resolve.conditions
Это изменение не затрагивает пользователей, которые не настраивали resolve.conditions, ssr.resolve.conditions или ssr.resolve.externalConditions.
До текущего обновления переменные по умолчанию для resolve.conditions и ssr.resolve.conditions были равны [], и некоторые переменные добавлялись уже внутренне.
в Vite 6 же исправляется эта ситуация, и мы получаем следующие значения этих переменных:
resolve.conditions—['module', 'browser', 'development|production'].ssr.resolve.conditions—['module', 'node', 'development|production'].
Как следует заметить, что ssr.resolve.conditions больше не берёт значение по умолчанию resolve.conditions и реализует собственные переменные.
Обратите внимание, что development|production — это специальная переменная, которая заменяется на production или development в зависимости от значения process.env.NODE_ENV. Эти значения по умолчанию экспортируются из Vite как defaultClientConditions и defaultServerConditions.
Если вы указали пользовательское значение для resolve.conditions или ssr.resolve.conditions, вам нужно обновить его, чтобы включить новые условия. Например, если вы ранее указали ['custom'] для resolve.conditions, то вместо этого вам нужно указать ['custom', ...defaultClientConditions].
JSON stringify
В Vite 5 при установке json.stringify: true функция json.namedExports была отключена.
Начиная с Vite 6, даже при установке json.stringify: true, json.namedExports не отключается и его значение сохраняется. Если вы хотите добиться прежнего поведения, вы можете установить json.namedExports: false.
Vite 6 также вводит новое значение по умолчанию для json.stringify, которое равно auto, что позволяет структурировать только большие файлы JSON. Чтобы отключить это поведение, установите json.stringify: false.
Расширенная поддержка ссылок на ассеты в элементах HTML
В Vite 5 только несколько поддерживаемых HTML-элементов могли ссылаться на ассеты, которые будут обрабатываться и компоноваться Vite во время сборки, например ,
Vite 6 расширяет поддержку еще большего количества HTML-элементов. Полный список можно найти в документации по возможностям HTML.
Чтобы отказаться от обработки HTML для определенных элементов, вы можете добавить к элементу атрибут vite-ignore.
postcss-load-config
postcss-load-config был обновлен до v6 с v4. Теперь для загрузки файлов конфигурации TypeScript postcss требуется tsx или jiti, а не ts-node. Также для загрузки YAML файлов конфигурации postcss теперь требуется yaml.
Sass теперь использует modern API по умолчанию
В Vite 5 по умолчанию использовался устаревший API для Sass. В версии Vite 5.4 была добавлена поддержка современного API.
Начиная с Vite 6, современный API используется по умолчанию для Sass. Если вы хотите продолжить использовать устаревший API, вы можете установить css.preprocessorOptions.sass.api: 'legacy' или css.preprocessorOptions.scss.api: 'legacy'. Однако имейте в виду, что поддержка устаревшего API будет удалена в Vite 7.
Для перехода на современный API ознакомьтесь с документацией Sass.
Кастомизация CSS названий файлов на выходе в library mode.
В Vite 5 имя выходного CSS файла в режиме библиотеки всегда было style.css и его нельзя было легко изменить через конфигурацию Vite.
Начиная с Vite 6, имя файла по умолчанию теперь использует значение name из package.json, аналогично именам выходных JS файлов. Если параметр build.lib.fileName установлен строкой, это значение будет использоваться и для имени выходного CSS файла. Чтобы явно задать другое имя для CSS файла, можно использовать новый параметр build.lib.cssFileName.
Для миграции, если вы полагались на имя файла style.css, вам следует обновить ссылки на него в соответствии с новым именем, основанным на имени вашего пакета. Например:
{
"name": "my-lib",
"exports": {
"./style.css": "./dist/my-lib.css"
}
}
Если вы предпочитаете использовать style.css, как в Vite 5, вы можете установить build.lib.cssFileName: 'style'.
В завершение
Vite 6.0 предлагает функции, улучшающие рабочие процессы и поддерживающие современные фреймворки. Его экосистема растет, а крупные компании активно его используют. Vite 6.0 предоставляет разработчикам мощные инструменты для создания эффективных приложений, будь то новый проект или обновление существующего. Учитывая всё это, можно сказать что Vite можно назвать фундаментом современной front-end разработки
НЛО прилетело и оставило здесь промокод для читателей нашего блога:
-15% на заказ любого VDS (кроме тарифа Прогрев) — HABRFIRSTVDS.
