Доступен Vite 4.0!
9 декабря 2022 - посмотрите анонс Vite 5.0
Vite 3 был выпущен пять месяцев назад. С тех пор количество загрузок пакета npm в неделю увеличилось с 1 миллиона до 2.5 миллионов. Экосистема также созрела и продолжает расти. В этом году в опросе Jamstack Conf использование среди сообщества выросло с 14% до 32%, при этом сохранив высокий уровень удовлетворенности 9.7. Мы увидели стабильные релизы Astro 1.0, Nuxt 3 и других фреймворков на базе Vite, которые внедряют инновации и сотрудничают: SvelteKit, Solid Start, Qwik City. Storybook объявил о поддержке Vite в качестве одной из основных функций для Storybook 7.0. Deno теперь поддерживает Vite. Принятие Vitest стремительно растет, и вскоре он будет представлять половину загрузок Vite в npm. Nx также инвестирует в экосистему и официально поддерживает Vite.
В качестве демонстрации роста, который испытали Vite и связанные с ним проекты, экосистема Vite собралась 11 октября на ViteConf 2022. Мы увидели представителей основных веб-фреймворков и инструментов, рассказывающих истории об инновациях и сотрудничестве. И в символическом шаге команда Rollup выбрала именно этот день для выпуска Rollup 3.
Сегодня команда Vite с помощью наших партнёров по экосистеме рада объявить о выпуске Vite 4, который в процессе сборки использует Rollup 3. Мы работали с экосистемой, чтобы обеспечить плавный путь обновления для этой новой мажорной версии. Vite теперь использует Rollup 3, что позволило нам упростить внутреннюю обработку ресурсов Vite и получить множество улучшений. Смотрите заметки о выпуске Rollup 3 здесь.
Быстрые ссылки:
Документация на других языках:
Если вы недавно начали использовать Vite, мы рекомендуем прочитать следующие разделы руководства: Почему Vite, Начало работы и Возможности. Если вы хотите участвовать, мы будем рады вашим вкладам на GitHub. Почти 700 человек уже внесли свой вклад в Vite. Следите за обновлениями в Twitter и Mastodon, или присоединяйтесь к сотрудничеству с другими в нашем сообществе Discord.
Поэкспериментируйте с Vite 4
Используйте pnpm create vite, чтобы создать проект Vite с вашим предпочтительным фреймворком, или откройте готовый онлайн-шаблон, чтобы поиграть с Vite 4, используя vite.new.
Вы также можете запустить pnpm create vite-extra, чтобы получить доступ к шаблонам от других фреймворков и сред выполнения (Solid, Deno, SSR и стартеры библиотек). Шаблоны create vite-extra также доступны, когда вы запускаете create vite в разделе Others.
Обратите внимание, что шаблоны для старта Vite предназначены для использования в качестве площадки для тестирования Vite с различными фреймворками. При создании вашего следующего проекта мы рекомендуем обратиться к стартерам, рекомендованным каждым фреймворком. Некоторые фреймворки теперь перенаправляют в create vite на свои стартеры тоже (create-vue и Nuxt 3 для Vue, и SvelteKit для Svelte).
Новый плагин для React с использованием SWC в процессе разработки
SWC теперь является зрелой заменой Babel, особенно в контексте проектов на React. Реализация React Fast Refresh в SWC значительно быстрее, чем в Babel, и для некоторых проектов это теперь лучшая альтернатива. С Vite 4 доступны два плагина для проектов на React с различными компромиссами. Мы считаем, что оба подхода заслуживают поддержки на данном этапе, и будем продолжать исследовать улучшения для обоих плагинов в будущем.
@vitejs/plugin-react
@vitejs/plugin-react — это плагин, который использует esbuild и Babel, обеспечивая быструю замену модулей (HMR) с небольшим размером пакета и гибкостью использования конвейерного преобразования Babel.
@vitejs/plugin-react-swc (новинка)
@vitejs/plugin-react-swc — это новый плагин, который использует esbuild во время сборки, но заменяет Babel на SWC в процессе разработки. Для крупных проектов, которые не требуют нестандартных расширений React, первоначальный запуск и горячая замена модулей (HMR) могут быть значительно быстрее.
Совместимость с браузерами
Современная сборка для браузеров теперь по умолчанию нацелена на safari14 для более широкой совместимости с ES2020. Это означает, что современные сборки теперь могут использовать BigInt, и оператор nullish coalescing больше не транспилируется. Если вам нужно поддерживать старые браузеры, вы можете добавить @vitejs/plugin-legacy как обычно.
Импорт CSS как строки
В Vite 3 импортирование значения по умолчанию из файла .css могло привести к двойной загрузке CSS:
import cssString from './global.css'Двойная загрузка могла происходить, поскольку файл .css будет сгенерирован, и, вероятно, строка CSS также будет использоваться кодом приложения — например, внедрена во время выполнения фреймворка. С Vite 4 экспорт по умолчанию для .css был объявлен устаревшим. В этом случае необходимо использовать модификатор суффикса запроса ?inline, так как он не генерирует импортированные стили .css:
import stuff from './global.css?inline'Узнайте больше в Руководстве по переходу.
Переменные окружения
Vite теперь использует dotenv версии 16 и dotenv-expand версии 9 (ранее использовались dotenv версии 14 и dotenv-expand версии 5). Если у вас есть значение, содержащее # или `, вам нужно будет обернуть его в кавычки:
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"Для получения более подробной информации смотрите журнал изменений dotenv и журнал изменений dotenv-expand.
Другие функции
- Сокращения CLI (нажмите
hво время разработки, чтобы увидеть все) (#11228) - Поддержка patch-package при предварительной сборке зависимостей (#10286)
- Более чистый вывод журналов сборки (#10895) и переход на
kBдля согласования с инструментами разработчика браузера (#10982) - Улучшенные сообщения об ошибках во время SSR (#11156)
Уменьшение размера пакета
Vite заботится о своем размере, чтобы ускорить установку, особенно в случае использования в качестве площадок для документации и воспроизведений. И снова, эта мажорная версия приносит улучшения в размере пакета Vite. Размер установки Vite 4 на 23% меньше по сравнению с Vite 3.2.5 (14.1 МБ против 18.3 МБ).
Обновления Vite Core
Vite Core и vite-ecosystem-ci продолжают развиваться, чтобы обеспечить лучший опыт для разработчиков, а также чтобы гарантировать, что разработка Vite масштабируется в соответствии с ростом экосистемы.
Плагины фреймворков вне ядра
@vitejs/plugin-vue и @vitejs/plugin-react были частью монорепозитория Vite Core с первых версий Vite. Это помогло нам получить обратную связь при внесении изменений, так как мы тестировали и выпускали как ядро, так и плагины вместе. С помощью vite-ecosystem-ci мы можем получать эту обратную связь с этими плагинами, разрабатываемыми в независимых репозиториях, поэтому с Vite 4 они были перемещены из монорепозитория Vite Core. Это имеет значение для истории Vite, не зависящей от фреймворков, и позволит нам создать независимые команды для поддержки каждого из плагинов. Если вы обнаружите какие-либо ошибки или захотите поделиться новыми функциями, пожалуйста, создайте соответствующие задачи в новых репозиториях: vitejs/vite-plugin-vue и vitejs/vite-plugin-react.
Улучшения vite-ecosystem-ci
vite-ecosystem-ci расширяет CI Vite, предоставляя отчёты о состоянии CI для большинства основных зависящих от Vite проектов по запросу. Мы запускаем vite-ecosystem-ci три раза в неделю и получаем своевременные отчёты перед введением регрессии. Vite 4 вскоре будет совместим с большинством проектов, использующих Vite, которые уже подготовили ветки с необходимыми изменениями и выпустят их в ближайшие дни. Мы также можем запускать vite-ecosystem-ci по запросу через пулреквесты, используя /ecosystem-ci run в комментарии, что позволяет нам узнать эффект изменений до их попадания в основную ветку.
Благодарности
Vite 4 не был бы возможен без бесчисленных часов работы участников Vite, многие из которых являются разработчиками проектов и плагинов, а также усилий команды Vite. Все мы работали вместе, чтобы ещё раз улучшить опыт разработчиков (DX) Vite для каждого фреймворка и приложения, использующего его. Мы благодарны за возможность улучшить общую базу для такой яркой экосистемы.
Мы также благодарны отдельным лицам и компаниям, спонсирующим команду Vite, а также компаниям, которые напрямую инвестируют в будущее Vite: работа @antfu7 над Vite и экосистемой является частью его работы в Nuxt Labs, Astro финансирует работу @bluwyoo над Vite Core, а StackBlitz нанимает @patak_dev для работы над Vite на полную ставку.
Следующие шаги
Наше непосредственное внимание будет сосредоточено на сортировке вновь открытых задач, чтобы избежать сбоев из-за возможных регрессий. Если вы хотите участвовать и помочь нам улучшить Vite, мы рекомендуем начать с сортировки задач. Присоединяйтесь к нашему Discord и обращайтесь в канале #contributing. Улучшайте нашу историю в #docs и помогайте другим в #help. Нам нужно продолжать строить полезное и дружелюбное сообщество для следующей волны пользователей, поскольку использование Vite продолжает расти.
Существует множество открытых направлений для дальнейшего улучшения опыта разработчиков (DX) для всех, кто выбрал Vite для поддержки своих фреймворков и разработки приложений. Вперёд!