Что такое ViteJS? Обзор нового инструмента сборки для frontend

Vite - это инструмент сборки, который значительно улучшает опыт разработки фронтенда. С помощью Vite можно создать среду разработки для таких фреймворков, как Vue и React и даже для ванильного JavaScript-приложения с dev-сервером и hot reloading всего за три команды.

Без дополнительной настройки ты также можешь использовать Vite для TypeScript, а с помощью одной дополнительной команды ты можешь использовать его для Sass. (Если бы мы то же самое делали с webpack, нам пришлось бы немного повозиться с настройками, с загрузчиками и отдельно устанавливать webpack dev server).

После установки Vite у тебя будет инструмент сборки и сервер разработки, можно сразу начинать работать с новейшими инструментами и языками.

В этом введении ты узнаешь, как просто начать работу с Vite. Ты также узнаешь о том, насколько быстр Vite, как сделать первые шаги к использованию его с такой библиотекой, как Vue и насколько с ним удобно работать.

Интересный факт: название «Vite» происходит от французского слова «быстрый», которое произносится как «vit».

Как работает Vite

Vite следует недавней тенденции таких инструментов, как Svelte (где фреймворк практически скомпилирован) и других инструментов, таких как Snowpack, которые используют современные возможности JavaScript (например, модули ES) для обеспечения плавной и быстрой разработки с минимальной конфигурацией и минимальными накладными расходами в виде установленных пакетов. По сути, ты устанавливаешь Vite с одним или двумя плагинами, делаешь очень мало настроек и просто начинаешь работать над своим приложением.

Vite - это современная среда разработки, в которой можно обойтись без этапа пакетирования, поскольку она предоставляет браузеру собственные модули ES. Он предоставляет шаблоны (набор стартовых файлов) для ряда фреймворков и ванильного JavaScript, а также предлагает поддержку TypeScript, JSX и Sass (хотя для Sass необходимо установить одну зависимость).

Vite работает очень быстро, поскольку использует встроенные модули ES и не требует пересборки всего пакета, когда что-то меняется. Это делает обновления HMR стабильно быстрыми, независимо от размера твоего приложения. При сборке в продакшен, Vite поставляется с предварительно настроенной командой сборки, в которую встроены многие оптимизации производительности.

Помимо высокой скорости, Vite также предлагает горячую замену модулей (то есть ты видишь обновление кода в браузере в процессе разработки), также можно использовать его для компиляции минифицированной версии твоего проекта (при использовании в продакшене). Используя его, ты можешь очень быстро приступить к работе с проектом Vue или React без необходимости устанавливать Vue CLI или Create React App. Это делает его идеальным для быстрого создания прототипов и небольших проектов, хотя ничто не мешает тебе использовать его и в более крупных проектах.

Итак, давай попробуем использовать Vite и посмотрим, что получится. Будет интересно посмотреть, как много из нашего обычного рабочего процесса будет лучше выполняться с помощью Vite.

Первая установка

Начнем с установки Vite.

Примечание. Чтобы следовать этому руководству, тебе понадобится Node.js, установленная на твоем компьютере.

После запуска npm init @vitejs/app мы получаем возможность выбрать имя проекта и шаблон. На момент написания статьи доступны следующие варианты:

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

Пока давайте остановимся на vanilla. В результате создается каталог (по имени проекта) с некоторыми файлами в нем. Здесь есть index.html, main.js, style.css, favicon.svg и несколько файлов для npm и Git. В package.json содержится только vite как зависимость и несколько скриптов для запуска среды разработки и начала сборки.

Как говорится в инструкциях на экране, нам нужно перейти в папку проекта и установить зависимости:

Затем мы можем запустить сервер dev с помощью npm run dev и просмотреть наше приложение на сайте http://localhost:3000/. При редактировании любого из файлов нашего проекта изменения немедленно отражаются на экране.

Запуск npm run build компилирует проект в папку dist, где можно найти файлы JavaScript и CSS. Оба файла минифицированы.

В документации говорится, что файлы TypeScript поддерживаются из коробки. Поэтому, хотя в vanilla нет специального шаблона TypeScript, мы должны иметь возможность переименовать main.js в main.ts и Vite должен скомпилировать его автоматически, верно? Да, так и есть! После переименования файла и добавления некоторого синтаксиса, специфичного для TypeScript, все вроде бы компилируется нормально.

Попробуем теперь проделать то же самое с CSS, переименовав его в style.scss и добавив некоторый синтаксис, специфичный для Sass. Следующая ошибка отображается как в консоли, так и на веб-странице:

Как же я люблю (достаточно) описательные ошибки! После выполнения npm install sass --save-dev и перезапуска watcher мы можем использовать Sass по своему усмотрению.

Обычно я заранее продумываю стек, устанавливаю необходимые зависимости и трачу немыслимое количество времени на настройку и выяснение того, почему некоторые инструменты не будут хорошо работать вместе. Конечно, мы все равно должны думать о нашем стеке заранее, но возможность переключиться с JavaScript на TypeScript и с CSS на Sass без особых усилий - это очень приятно.

Мне очень нравится идея того что мы можем настроить довольно продвинутый стек за минуту или две. Учитывая, что Vite использует index.html в качестве точки входа и создает обычный HTML, CSS и JavaScript, Vite уже показывает себя как отличный инструмент для статических сайтов и, возможно, приложений Jamstack.

Одностраничное приложение

Теперь выясним, можем ли мы создать одностраничное приложение. Давай попробуем Vue!

После запуска npm init @vitejs/app и выбора шаблона Vue мы получим Vite, Vue и плагин Vite для компиляции Vue. Если мы создаем SPA, мы, вероятно, хотим работать с маршрутами, поэтому установим Vue Router.

Похоже, что Vite здесь не поможет. Мы получаем простую настройку Vue и отвечаем за то, что мы подключаем к Vue. После установки vue-router и настройки Vue на его использование, все работает. Мы также можем использовать Vite для создания нескольких страниц, как описано на странице многостраничного приложения в документации, хотя это требует настройки конфигурации Rollup в Vite.

Я нашел vite-plugin-vue-router, относительно новый плагин, созданный сообществом, который генерирует маршрутизатор на основе путей к файлам, как мы получаем в Nuxt.

Я уверен, что в какой-то момент кто-то создаст шаблон Vue + Vue Router + Vuex для Vite, но я сомневаюсь, что он будет лучше, чем Nuxt. Полагаю, то же самое можно сказать о React и Next.js, а также Svelte и Sapper/SvelteKit. Это фреймворки для веб-приложений, которые оптимизированы для соответствующих библиотек и для сложных веб-приложений.

Думаю, что Vite определенно является вариантом, если нет проверенного в боях фреймворка для веб-приложений для выбранного тобою языка, хотя он потребует некоторой настройки.

Интеграция с другими бэкэндами

Иногда мне приходится работать над кодовыми базами, которые не являются Jamstack, но используют .NET или PHP в качестве бэкэнда. Теоретически, мы все еще можем использовать Vite для генерации оптимизированных пакетов JavaScript и CSS. У Vite есть удобная страница интеграции с бэкэндом специально для этой цели.

После выполнения инструкций Vite создает файл манифеста, который содержит информацию обо всех созданных пакетах. Этот файл может быть прочитан для генерации тегов <link> и <script> для пакетов CSS и JavaScript соответственно. Все import файлы собираются в main.js, а все динамические импорты (import('path/to/file.js')) становятся отдельными пакетами.

Эффективность

На странице "Почему Vite" речь идет в основном о производительности и опыте разработчиков. После нескольких тестов я должен сказать, что впечатлен. Действительно впечатлен. Vite dev server запускается мгновенно, а благодаря функции Hot Module Replacement каждое изменение кода отражается в браузере быстро, иногда мгновенно.

Здесь я импортировал библиотеку JavaScript размером 100 кБ, добавил 20 тысяч строк CSS, изменил типы файлов на TypeScript и Sass, чтобы заставить Vite использовать компиляторы TypeScript и Sass соответственно. Конечно, есть некоторая задержка после моих попыток замедлить работу, но она все равно превосходит мои ожидания.

Опыт разработчика

За свою карьеру я настроил сотни проектов с помощью инструментов сборки. Независимо от того, использовал ли я Grunt, Gulp, Rollup или webpack, большие и сложные проекты занимали у меня день или два, чтобы настроить и убедиться, что все инструменты и плагины работают как надо. Позже я уделял больше времени инструментам, чтобы исправить ошибки, улучшить оптимизацию связок и время сборки.

По сравнению с этим, Vite - это легкий бриз. Для этого введения я установил четыре стека и слегка настроил их в кратчайшие сроки. Vite избавляет от необходимости связывать вместе два десятка инструментов и плагинов. С некоторыми замечательными настройками по умолчанию ты даже сможешь пропустить настройку и сразу приступить к работе. Это потрясающе. У меня похожие чувства по отношению к Nuxt и Next.js.

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

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

Заключение

В целом, Vite - это очень здорово! Это прекрасное дополнение к недавней тенденции инструментов, упрощающих работу с инструментами, таких как Parcel и Snowpack. Я был удивлен тем, насколько легко его настроить. Это требует так мало усилий, что создается ощущение что здесь что-то не чисто и мне это нравится.

Если ты собираешься использовать frontend фреймворк, я бы, вероятно, выбрал Nuxt, Next.js, SvelteKit/Sapper или аналогичные. Эти инструменты не только упрощают инструментарий и ускоряют разработку, но и добавляют множество плагинов, которые, вероятно, понадобятся тебе для сложных приложений.

Если мы не используем фреймворки, но нужны минифицированные скрипты и стили, то Vite станет предпочтительным инструментом для меня, уверен, тебе он тоже понравится.

Источник: https://www.sitepoint.com/vitejs-front-end-build-tool-introduction/