Vite — это инструмент сборки, который значительно улучшает интерфейс разработки. Вы можете использовать Vite для настройки среды разработки для таких фреймворков, как Vue и React, и даже для ванильного приложения JavaScript с сервером разработки и горячей перезагрузкой всего за три команды.
Без дополнительной настройки вы также можете использовать Vite для TypeScript, а с помощью одной дополнительной команды вы можете использовать его для Sass. (Для проекта
После установки Vite у вас будет инструмент сборки и сервер разработки, и вы будете готовы начать работу с новейшими инструментами и языками.
В этом введении вы узнаете, как просто начать работу с Vite. Вы также узнаете, насколько быстр Vite, как сделать первые шаги к его использованию с такой библиотекой, как Vue, и насколько сильно он мешает вам при использовании.
Забавный факт: название «Vite» происходит от французского слова «быстро», которое произносится как «вит».
Как работает Вайт
Vite следует недавней тенденции таких инструментов, как Svelte (где фреймворк в основном компилируется) и других инструментов, таких как Snowpack, которые используют современные функции JavaScript (такие как модули ES), чтобы обеспечить плавный и быстрый опыт разработки практически без настройки и не так много. накладные расходы на установленные пакеты. По сути, вы устанавливаете Vite с одним или двумя плагинами, выполняете очень небольшую настройку и просто начинаете работать над своим приложением.
Vite предоставляет современную среду разработки, в которой можно отказаться от этапа объединения, поскольку она обслуживает встроенные в браузер модули ES. Он предоставляет шаблоны (набор стартовых файлов) для ряда фреймворков и ванильный JavaScript, а также предлагает поддержку TypeScript, JSX и Sass (хотя для Sass нужно установить одну зависимость).
Vite действительно быстр, потому что он использует собственные модули ES и не требует перестройки всего пакета, когда
Помимо скорости, Vite также предлагает горячую замену модулей (это означает, что вы видите обновление кода в браузере по мере разработки), и вы можете использовать его для компиляции уменьшенной версии вашего проекта для использования в производстве. Используя его, вы можете очень быстро приступить к работе с проектом Vue или React без участия в Vue CLI или приложении Create React, которые поставляются с включенной кухонной раковиной. Это делает его идеальным для быстрого прототипирования и небольших проектов, хотя ничто не мешает вам использовать его и в более крупном проекте.
Итак, давайте попробуем Vite и посмотрим, как мы пойдем. Будет интересно посмотреть, какая часть нашего обычного рабочего процесса будет лучше обрабатываться с помощью Vite. (Сполиер: я обнаружил, что некоторые вещи были лучше с Vite, но не все.)
Первая установка
Начнем с установки Vite.
Примечание: чтобы следовать этому руководству, вам понадобится копия Node, установленная на вашем компьютере.
После запуска npm init @vitejs/appмы можем выбрать имя проекта и шаблон. На момент написания варианты следующие:
vanilla
vue
react
preact
svelte
Пока возьмем ваниль. Это создает каталог (на основе имени проекта) с некоторыми файлами в нем. Есть index.html, main.js, style.css, favicon.svgи несколько файлов для npm и Git. Он package.jsonсодержит только viteзависимости и некоторые сценарии для запуска среды разработки и запуска сборки.
Как говорится в инструкциях на экране, нам нужно перейти в папку проекта и установить зависимости:
cd
npm install
Затем мы можем запустить сервер разработки 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. Следующая ошибка отображается как в консоли, так и на
Сообщение об ошибке: Внутренняя ошибка сервера: зависимость препроцессора «sass» не найдена. Вы его установили?
Я люблю (довольно) описательную ошибку! После запуска npm install sass —
Обычно я заранее думаю о стеке, устанавливаю нужные мне зависимости и трачу смехотворную сумму на настройку и выяснение того, почему некоторые инструменты не будут хорошо работать вместе. Конечно, нам
На данный момент я в восторге, потому что мы можем настроить довольно продвинутый стек за минуту или две. Учитывая, что Vite использует в index.htmlкачестве точки входа и использует простой HTML, CSS и JavaScript, Vite уже зарекомендовал себя как отличный инструмент для статических сайтов и потенциально приложений Jamstack.
Одностраничное приложение
Давайте выясним, можем ли мы настроить одностраничное приложение. Давайте попробуем Вью!
После запуска npm init @vitejs/appи выбора шаблона Vue мы получаем Vite, Vue и плагин Vite для компиляции Vue. Если мы создаем SPA, мы, вероятно, хотим обрабатывать маршруты, поэтому давайте установим Vue Router.
Вайт тут не поможет. Мы получаем простую настройку Vue, и мы отвечаем за то, что мы подключаем к Vue. После установки
Я нашел
Я уверен, что в
Я думаю, что Vite определенно является вариантом, если нет проверенной в боевых условиях среды
Интеграция с другими бэкендами
Иногда мне (приходится) работать с кодовыми базами, которые не являются Jamstack, но используют.NET или PHP в качестве серверной части. Теоретически мы все еще могли бы использовать Vite для создания оптимизированных пакетов JavaScript и CSS. Vite удобно имеет внутреннюю страницу интеграции специально для этой цели.
Следуя инструкциям, Vite создает файл манифеста, содержащий информацию обо всех созданных пакетах. Этот файл можно прочитать, чтобы сгенерировать теги
и
Vite позволяет нам настраивать его внутренние компоненты, поэтому мы можем переопределить конфигурацию Rollup и различных плагинов Rollup. Это здорово, если у нас есть особые потребности. Лично я бы не стал настраивать слишком много, чтобы мы могли быть уверены, что установка работает хорошо, что подводит меня к следующему пункту: доверие.
Чем больше инструментов я связываю вместе, тем более хрупким он кажется. Если один компонент выходит из строя или вносит критические изменения, весь конвейер ломается, и нам приходится снова углубляться в каждый инструмент и плагин и их тонкости, чтобы исправить это. Vite, по сути, снимает это бремя с нас, и в распоряжении Vite есть сообщество для решения проблем. Это означает, что мы можем доверять нашим инструментам, чтобы они выполняли свою работу.
Вывод
В общем, Вайт очень крут! Это прекрасное дополнение к недавней тенденции инструментов, упрощающих работу с инструментами, таких как Parcel и Snowpack. Я был удивлен, увидев, насколько легко его настроить. Это требует так мало усилий, это почти похоже на обман, и мне это нравится.
Если вы собираетесь использовать интерфейсный фреймворк, я бы, вероятно, выбрал Nuxt, Next.js, SvelteKit/Sapper или
Vite, вероятно, является моим предпочтительным инструментом, если я избегаю фреймворка, но мне нужны минимизированные скрипты и стили.
