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

Поскольку веб-приложения становятся все более многофункциональными, потребность в быстрых и эффективных инструментах сборки продолжает расти.

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

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

Инициализировать проект Vite

Прежде чем вы сможете использовать Вите, вы должны установить Node.js и диспетчер пакетов Node в вашей системе. После установки этих двух пакетов вы можете приступить к созданию проекта с помощью Vite.

Вот как инициализировать проект с Vite с помощью npm:

инициализация npm

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

instagram viewer

Вот разбивка параметров, которые команда предлагает вам выбрать:

  1. Название проекта. Когда вы запускаете команду, она предлагает вам указать имя для вашего нового проекта. Имя, которое вы укажете, также появится в пакет.json файл и служит именем каталога вашего проекта.
  2. Выберите фреймворк. В этом приглашении вам будет предложено выбрать структуру для вашего проекта. В настоящее время Vite поддерживает популярные интерфейсные фреймворки, такие как React, Vue, Angular и вариант Vanilla для простого кода JavaScript.
  3. Выберите вариант. Это предложит вам выбрать вариант для вашего проекта, охватывающий такие альтернативы, как JavaScript и его подмножество языка TypeScript.

После того, как вы предоставите необходимую информацию, Vite создаст новую структуру проекта в вашем текущем рабочем каталоге. Структура будет представлять базовую настройку проекта, включая пакет.json файл, а источник каталог с index.html и main.js файл и публичный каталог.

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

Чтобы запустить сервер разработки и отслеживать любые изменения, внесенные в ваш проект, вы запустите нпм запустить разработчик в терминале вашего проекта.

Особенности Вайт

Функции Vite сосредоточены на оптимизации процесса сборки и повышении качества веб-сборки.

Сервер быстрой разработки

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

Оптимизированный процесс сборки

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

Поддержка различных интерфейсных фреймворков

Vite поддерживает различные интерфейсные фреймворки, включая Vue и аналогичные фреймворки, такие как React Js и Angular Js. Это позволяет разработчикам выбирать предпочтительный фреймворк и использовать мощные возможности Vite.

Горячая замена модуля (HMR)

Функция замены горячего модуля (HMR) Vite позволяет быстро и без проблем обновлять приложение, не требуя полного обновления страницы. Это делает процесс разработки более быстрым и эффективным.

Предварительная обработка CSS и интеграция PostCSS

Vite поддерживает предварительную обработку CSS, включая Sass, Less и Stylus. Он также интегрируется с PostCSS, что позволяет выполнять дополнительные преобразования и оптимизации CSS.

Vite поставляется со многими другими функциями, включая поддержку TypeScript, JSX и WebAssembly. С выпуском Vite v4.0.4, сообщество разработчиков Vite выросло и активно поддерживает программное обеспечение, регулярно добавляя новые функции.

Интерфейс командной строки Vite (CLI)

Интерфейс командной строки Vite (CLI) — это удобный инструмент для настройки поведения Vite. Он предоставляет ряд важных команд, которые также помогают оптимизировать процесс разработки. Вот некоторые из важнейших команд CLI:

строить

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

Предварительный просмотр

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

проведите оптимизацию

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

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

Файл конфигурации Vite

В Vite файл конфигурации определяет различные параметры процесса сборки. Конфигурационный файл Vite использует JavaScript и синтаксис модулей ES6.

По умолчанию вы должны назвать свой файл конфигурации vite.config.js и поместите его в корневой каталог проекта.

Вот некоторые из наиболее часто используемых параметров в файле конфигурации Vite:

  • корень. Указывает корневой каталог проекта.
  • сервер. Настраивает сервер разработки. Он включает в себя параметры для настройки хоста, порта и прокси-запросов к серверной части API.
  • плагины. Позволяет добавлять плагины в процесс сборки Vite. Плагин — это функция, которая каким-то образом изменяет процесс сборки, например, добавляет поддержку нового формата файла или преобразует исходный код.
  • решать. Это настраивает, как Vite разрешает импорт в проекте. Он включает в себя параметры для указания псевдонимов, расширений и каталогов модулей.

Вот пример файла конфигурации Vite:

Импортировать { определить конфигурацию } от'пригласить';
Импортировать путь от'путь';
экспортпо умолчанию определить конфигурацию ({
 сервер: {
 порт: 3000,
 открыть: истинный,
 },
 решать: {
 псевдоним: {
'@': path.resolve (__dirname, './источник'),
 },
 },
 плагины: [],
});

Этот файл конфигурации устанавливает базовый проект Vite с:

  • локальный сервер разработки, работающий на порту 3000
  • псевдоним для источник каталог
  • нет плагинов

У Vite сильное сообщество

Несколько онлайн-ресурсов очень подробно объясняют, как использовать Vite с популярными фреймворками, такими как React, Vue и Angular.

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