Введение

Надеюсь, вам понравилось читать мою статью для начинающих ** Понимание основ Vite Js и почему вы должны использовать его в своих проектах. ** «Если нет, я предполагаю, что вы уже хорошо разбираетесь в Vite. Теперь вы должны быть взволнованы, чтобы попробовать этот новый Webpack, самое последнее усовершенствование в технологии.

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

Почему Вите?

Vite — это инструмент сборки, предназначенный для ускорения разработки учащимися современных веб-проектов. Как вы все знаете, создание реактивного проекта требует некоторого времени и замедляет процесс разработки. Но:-

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

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

Запускаем свой первый проект Vite: строительные леса

Итак, чтобы создать приложение Vite. Откройте редактор кода (Visual Studio), откройте в нем новый терминал и скажите:

с NPM:

$ npm create vite@latest

с пряжей:

$ yarn create vite

Введите название вашего проекта. Нажмите Enter, чтобы ввести имя по умолчанию vite-project.

Выберите фреймворк — React

Выберите вариант — React

$ cd vite-project
$ npm install
$ npm run dev

Ваш проект в настоящее время активен на локальном хосте: 3000.

Указать на заметку

  • Возможно, вы заметили, что в проекте Vite index.html четко отображается, а не размещается в открытом доступе. Это было сделано намеренно; пока ваше приложение разрабатывается, Vite действует как сервер, а ваша точка входа — index.html.
  • Index.html обрабатывается как исходный код и является частью графа модулей Vite. Он решает <script type="module" src="...">
  • Встроенные <script type="module"> и CSS, на которые ссылаются через ‹link href›, также могут воспользоваться специфическими функциями Vite. Также не требуются специальные заполнители%PUBLIC URL%, поскольку URL-адреса внутри index.html автоматически перебазируются.

Заключение

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