Vite.js — это инструмент быстрой разработки для современных веб-проектов. Он фокусируется на скорости и производительности за счет улучшения опыта разработки.

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

Vite состоит из двух основных частей:

• Сервер разработки обеспечивает поддержку горячей замены модулей (HMR) для обновления модулей во время выполнения приложения. Когда в исходный код приложения вносятся изменения, обновляются только изменения, а не перезагружается все приложение. Эта функция помогает ускорить время разработки.
• Команда build позволяет разработчикам связывать свой код с Rollup, предварительно настроенным для вывода высокооптимизированных статических ресурсов для производства.

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

Когда модули ES были представлены в ES2015, многие браузеры плохо поддерживали модули ES6. Чтобы решить эту проблему, современные браузеры теперь поддерживают собственные модули ES. Это позволяет разработчикам использовать операторы importand exportизначально.

В родном ES импорт должен получить либо относительный, либо абсолютный URL-адрес, поскольку он не поддерживает импорт голых модулей, например:

import { someMethod } from 'my-dep'

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

Vite автоматически обнаружит импорт голых модулей из ваших исходных файлов и выполнит над ними следующие два действия:

• Vite предварительно свяжет исходные файлы, чтобы ускорить загрузку страниц и преобразовать модули CommonJS/UMD в ESM.
• Чтобы браузеры могли импортировать модули без ошибок, Vite перепишет импорт на действительные URL-адреса, подобные этому.

/node_modules/.vite/my-dep.js?v=f3sf2ebb

Зачем использовать Vite?

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

Есть много причин, по которым вы должны использовать Vite для своего проекта. Давайте кратко рассмотрим некоторые из них.

Производительность

Предварительное связывание с ESbuild от Vite делает его в 10–100 раз быстрее, чем при использовании любого другого сборщика JS. Это связано с тем, что это помогает повысить скорость страницы и преобразовать модули CommonJS/UMD в ESM.

Согласно документации Vite,

«Этап предварительной сборки выполняется с помощью esbuild и делает время холодного запуска Vite значительно быстрее, чем у любого сборщика на основе JavaScript».

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

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

Нет необходимости вручную настраивать HMR API в вашем приложении. Он автоматически добавляется в ваш проект во время установки приложения.

Благодаря производительности HMR вы можете разрабатывать более легкие и быстрые приложения независимо от количества модулей или размера вашего приложения.

Параметры конфигурации

Vite позволяет вам лучше контролировать конфигурацию вашего проекта, расширяя конфигурацию по умолчанию с помощью vite.config.jsили vite.config.ts. Они расположены в базовом корневом каталоге проекта.

Вы также можете указать другие файлы конфигурации с --configопцией CLI, как показано ниже:

vite --config my-config.js

Что вам понадобится

Прежде чем вы сможете создать проект Vite, на вашем компьютере должно быть установлено следующее программное обеспечение:

• Node.js версии 12.2.0 или выше (чтобы проверить, установлен ли Node на вашем компьютере, запустите node -vна терминале)
• Npm / пряжа

Установив их на свой компьютер, вы можете создать проект Vite.

Как создать проект Vite

Чтобы создать приложение Vite, откройте терминал и перейдите в папку, в которой вы хотите сохранить программу Vite. Затем запустите эту команду:

npm create @vitejs/app my-vite-app

Примечание: my_vite_app это имя приложения Vite, которое мы хотим создать. Вы можете изменить его на любое имя, которое вы предпочитаете.

После выполнения вышеуказанной команды вам будет предложено выбрать a frameworkи template(вариант). Для целей этого руководства мы будем использовать React, но вы можете выбрать любую платформу и шаблон, с которыми вы знакомы.

Затем выполните следующие команды, чтобы завершить установку:

cd vite_application
npm install

Установка может занять несколько минут, поэтому просто дождитесь ее завершения.

Как запустить приложение Vite

Чтобы запустить приложение Vite на терминале, перейдите в папку приложения ( vite_application), а затем выполните приведенную ниже команду dev, чтобы запустить сервер разработки:

npm run dev

Выполнение вышеуказанной команды запустит сервер разработки. Затем откройте терминал и введите http://localhost:3000.

Вы должны увидеть что-то вроде этого в браузере:

Структура папок Vite

Давайте посмотрим, как организованы папки приложений Vite. Мы также подробно рассмотрим несколько папок и файлов.

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

папка node_modules

Папка node_modules содержит все необходимые зависимости для приложения, которые указаны в файле package.json.

Все настроенные зависимости в package.json будут загружены в папку node_modules после npm installзапуска команды.

При отправке исходного кода на GitHub вам не нужно отправлять папку node_modules, потому что пользователи могут установить все необходимые зависимости, используемые в вашем приложении, через package.json.

Вы можете найти файл package.json в корневом каталоге родительского приложения.

папка src

Папка src — это одна из папок, с которой мы чаще всего взаимодействуем при разработке приложений Vite. Эта папка содержит app.jsx, main.jsx, app.css и index.js.

Все активы вашего приложения, такие как изображения, видео и другие файлы, должны храниться в папке src, потому что Vite автоматически перебазирует все URL-адреса внутри index.html.

App.jsx и main.jsx

Файл app.jsx — это базовый компонент, который служит контейнером для всех других компонентов, используемых в приложении.

В файле main.jsx вы указываете корневой идентификатор из index.html и визуализируете все компоненты, используемые в приложении.

index.css и приложение.css

Эти файлы содержат все стили CSS, используемые в программе. Вы можете добавить свой собственный файл CSS или изменить стиль.

Заключение

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

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