Что такое Vitejs?

Vitejs Программирование и разработка

Vite — это инструмент сборки, который значительно улучшает интерфейс разработки. Вы можете использовать Vite для настройки среды разработки для таких фреймворков, как Vue и React, и даже для ванильного приложения JavaScript с сервером разработки и горячей перезагрузкой всего за три команды.

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

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

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

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

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

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

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

Читайте также:  Узнайте о концепции в C++ 20

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

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

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

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

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

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

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

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

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

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

cd vite-project
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. Следующая ошибка отображается как в консоли, так и на веб-странице:

Давайте попробуем то же самое с CSS

Мне очень нравятся (справедливые) описательные ошибки! После запуска npm install —save-dev sass и перезапуска наблюдателя теперь мы можем использовать 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 для создания нескольких страниц, как описано на странице многостраничного приложения в документации, хотя это требует настройки конфигурации Vite Rollup.

Я нашел 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 расслоения соответственно. Все imports объединяются main.js, а все динамические import ( import(‘path/to/file.js’)) становятся отдельными пакетами.

Представление

Страница Почему Vite в первую очередь посвящена производительности и опыту разработчика. После некоторых тестов я должен сказать, что впечатлен. Действительно впечатлен. Сервер Vite dev запускается мгновенно, а с заменой горячего модуля каждое изменение кода отображается в браузере быстро, иногда мгновенно.

Страница Почему Vite в первую очередь посвящена

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

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

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

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

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

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

Заключение

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

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

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

Оцените статью
bestprogrammer.ru
Добавить комментарий

  1. Ренат

    Спасибо за статью. Прочитал до этого момента. Больше на данный момент и не надо. Замените опечатку:
    npm install sass —save-dev
    На
    npm install —save-dev sass

    Ответить