В наши дни, фронтенд-разработка становится все более сложной и многогранной. Создание быстрого и современного веб-приложения требует не только навыков в кодировании, но и знания различных инструментов и технологий. Одним из таких инструментов является Vite, который сейчас является одним из самых популярных инструментов для сборки фронтенда.
Vite - это современный инструмент для сборки фронтенда, разработанный командой Evan You. Он предлагает быструю и эффективную сборку приложений, а также поддержку современных функций и возможностей. Vite использует модульную систему ES Modules, что позволяет разработчикам писать код с использованием современных синтаксических возможностей и импортировать модули по мере необходимости.
Одной из основных причин является его быстродействие. Vite использует инкрементальную компиляцию, что позволяет быстро обновлять страницу при изменении кода. Это делает процесс разработки более интерактивным и приятным.
Еще одной причиной популярности Vite является его поддержка новых функций и возможностей. Vite поддерживает современные синтаксические возможности, такие как JSX, TypeScript и CSS Modules. Он также предлагает возможность использования различных плагинов и инструментов для улучшения процесса сборки.
Наконец, Vite интегрируется хорошо с другими инструментами и плагинами. Он поддерживает популярные фреймворки и библиотеки, такие как Vue.js, React и Angular. Он также имеет широкий спектр плагинов, которые позволяют расширять функциональность Vite под ваши потребности.
Vite очень быстр и решает большинство вопросов при сборке проекта, но оказалось, что в нем нет стандартного плагина для обработки webmanifest и поэтому он его не обрабатывает и кладет в бандл таким каким он есть и поэтому он не генерирует в бандл иконки, которые в нём определены.
В общем если вы попытаетесь собрать ваш проект в Vite - ваш вэб-манифест окажется не рабочим.
Никаких плагинов для трансформации webmanifest я не нашел. В нескольких issue по данному вопросу все рекомендуют забить на иконки для него и класть их в папку public, чтобы при сборке VIte их просто переложил без трансформаций в dist, но это чревато ошибками на клиенте когда вы измените содержимое иконок, а они не отобразятся из-за того, что предыдущие версии иконок уже закешированы в браузере под этими именами.
Есть правда один монстр-плагин vite-plugin-pwa, но это огромный комбайн и предназначен он для создания сервис воркеров на базе workbox. Ставить его и разбираться с его конфигурацией ради корректной генерации webmanifets - это overkill.
Я сам только недавно начал переходить на Vite и как оказалось для написания плагина в нём придется попотеть ничуть не меньше чем при написании плагина для webpack - вам сначала нужно изучить систему плагинов для Vite, а затем изучить строение плагинов в Rollup т.к. Vite является высокоуровневой надстройкой над Rollup.
В общем, изучая Vite более 3-х недель я решил написать плагин, чтобы исправить этот пробел в сборке приложения на Vite.
Реализация плагина банальна и не интересна простому разработчику приложений, а тем кому интересно и так смогут посмотреть исходники.
В общем вот сам плагин:
@budarin/vite-plugin-webmanifest
Пользуйтесь им для сборки своих манифестов, пишите мне свои замечания и пожелания.
Top comments (0)