Руководство по использованию Vite в React

Введение

Vite, разработанный Evan You (создателем Vue.js), создан для обеспечения молниеносной среды разработки. Для этого он обслуживает файлы с помощью нативных модулей ES и использует оптимизированный сервер разработки. Всё это позволяет ускорить запуск сервера и сделать разработку более отзывчивой.

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

В статье мы рассмотрим, как создать проект React с помощью Vite, изучим структуру проекта, покажем, как работать с ресурсами и развернуть приложение. В конце мы рассмотрим, как Vite может улучшить опыт разработки React.

Что такое Vite

Vite — это современный инструмент для сборки, ориентированный на скорость и эффективность, особенно при работе с такими JavaScript-фреймворками, как React. Разработанный Evan You, создателем Vue.js, Vite выделяется своей способностью обеспечивать быструю и оптимизированную разработку.

Ключевые особенности Vite

• Мгновенный запуск сервера: В отличие от традиционных бандлеров, сервер разработки Vite запускается практически мгновенно, обслуживая файлы как собственные ES-модули, что позволяет обойтись без сборки в процессе разработки.
• Быстрая горячая замена модулей (HMR): HMR от Vite работает невероятно быстро, позволяя видеть изменения в компонентах React практически мгновенно, что ускоряет разработку.
• Оптимизированные сборки для продакшена: Для оптимизации сборки Vite использует Rollup. Он включает такие функции, как автоматическое разделение кода, что улучшает время загрузки приложения.
• Поддержка современной разработки: Vite отлично работает с современными инструментами JavaScript, такими как TypeScript, JSX, и препроцессорами CSS, такими как Sass (Ускорение компиляции Sass в Vite и Webpack), обеспечивая передовой опыт разработки из коробки.

Vite vs. Webpack

Несмотря на то, что Webpack является популярным выбором уже много лет, он требует сложных настроек и может быть медленнее в процессе разработки из-за процесса сборки. В отличие от него, Vite упрощает процесс настройки и пропускает процесс сборки во время разработки, что приводит к ускорению времени запуска сервера и HMR. Сборки Vite для продакшена также оптимизированы, как и Webpack, но имеют более простую конфигурацию.

Почему стоит использовать Vite с React

• Скорость: Быстрый запуск сервера Vite и HMR упрощают разработку React-приложений без длительных процессов сборки.
• Простота: Простая в использовании настройка Vite позволяет сосредоточиться на создании компонентов React, а не на настройке инструментов сборки.
• Эффективность: Vite гарантирует, что ваше React-приложение будет не только быстро разработано, но и оптимизировано для продакшена с минимальными усилиями.

Vite предлагает более современную и эффективную альтернативу традиционным бандлерам вроде Webpack, поэтому он отлично подходит для проектов React, в которых приоритетом являются скорость и простота.

Настройка среды разработки

Прежде чем приступить к работе с Vite в связке с React, необходимо убедиться, что в системе установлены Node.js и npm. Если они не установлены, выполните следующие шаги, чтобы приступить к работе.

Установка Node.js и npm

Чтобы установить Node.js и npm, посетите официальный сайт Node.js и загрузите последнюю стабильную версию. После установки можно проверить установку, выполнив следующие команды в терминале:

node -v
npm -v

Эти команды должны отобразить установленные версии Node.js и npm, подтверждая, что они правильно настроены.

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

Теперь, когда Node.js и npm готовы, можно создать новый проект React с использованием Vite. Vite предоставляет простую команду для быстрой настройки нового проекта. Откройте терминал и выполните следующие команды:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

• npm create vite@latest my-react-app --template react: Эта команда инициализирует новый проект Vite с шаблоном React. Замените my-react-app на желаемое имя проекта.
• cd my-react-app: Перейдите в только что созданный каталог проекта.
• npm install: Установите необходимые зависимости для проекта React.

Запуск сервера разработки

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

npm run  dev

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

Понимание структуры проекта

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

my-react-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

Основные файлы и папки

• index.html: Этот файл является точкой входа приложения и располагается в корневом каталоге. В отличие от традиционных бандлеров, Vite напрямую обслуживает этот HTML-файл во время разработки. Именно сюда монтируется React приложение, и Vite внедряет необходимые скрипты для его загрузки.
• src/: Каталог src содержит весь код приложения.
• src/main.jsx: Это главная точка входа для React приложения. Он импортирует React, рендерит корневой компонент (App.jsx) и прикрепляет его к элементу #root в файле index.html.
• src/App.jsx: Это корневой компонент приложения, с которого начинается создание пользовательского интерфейса. Этот файл можно изменять, добавляя новые компоненты по мере роста проекта.
• vite.config.js: Этот файл содержит конфигурацию Vite. Он позволяет настроить поведение Vite, добавить плагины или изменить процесс сборки, но для большинства небольших проектов этот файл может и не понадобиться.

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

Основные файлы

• index.html: HTML-файл, в который внедряется приложение React. Он содержит единственный элемент <div> с id='root', в котором будет установлено приложение React.

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Vite React App</title>
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>
    </body>
  </html>

• src/main.jsx Основная точка входа JavaScript для приложения React. Она рендерит компонент App в <div id="root"> в index.html.

  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

• src/App.jsx : Главный компонент приложения React. Именно здесь начинается создание пользовательского интерфейса. По умолчанию он включает простой компонент React, но его можно изменить в соответствии с вашими потребностями.

  import React from 'react';
  
  function App() {
    return (
      <div>
        <h1>Welcome to Vite + React!</h1>
      </div>
    );
  }
  
  export default App;

Модификация App.jsx для создания простого компонента React

Давайте изменим стандартный компонент App.jsx, создав простой React компонент, отображающий список элементов:

import React from 'react';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>Simple List with Vite and React</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

В этом примере:

• Задаём массив элементов с несколькими элементами для примера.
• Используя функцию map(), перебираем массив items и отображаем каждый элемент как элемент списка (<li>).

Работа с Vite в проекте React

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

Импорт и использование ресурсов (изображений, стилей)

Vite позволяет с лёгкостью импортировать такие ресурсы, как изображения или CSS-файлы, непосредственно в компоненты React, эффективно связывая их во время сборки.

import React from 'react';
import logo from './assets/logo.png'; // Импорт изображения

function App() {
  return (
    <div>
      <img src={logo} alt="App Logo" />
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

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

import React from 'react';
import './App.css'; // импорт css файла

function App() {
  return (
    <div className="app-container">
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

Как Vite обрабатывает HMR

Одна из отличительных особенностей Vite — быстрая Горячая Замена Модуля (HMR). HMR позволяет мгновенно увидеть изменения в приложении без полной перезагрузки страницы. При изменении файла Vite обновляет только изменённый модуль, сохраняя состояние приложения.

Например, при обновлении компонента React:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to the updated Vite React App!</h1> {/* Изменение текста */}
    </div>
  );
}

export default App;

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

Решение распространённых проблем

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

Ошибка: "Failed to resolve module"

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

Решение:

• Дважды проверьте пути импорта в коде. Убедитесь, что импортируете правильный файл или модуль.

• Для сторонних библиотек попробуйте переустановить зависимости:

  npm install

• Если проблема сохраняется, очистите кэш Vite и перезапустите сервер.

  rm -rf node_modules/.vite
  npm run dev

Ошибка: "React Refresh failed"

Vite использует React Fast Refresh, позволяющий выполнять HMR. Иногда это может не сработать, особенно если версия React не совпадает или есть проблемы с конфигурацией.

Решение:

• Убедитесь, что используете поддерживаемую версию React (17.x или более позднюю).

• Убедитесь, что @vitejs/plugin-react правильно установлен и добавлен в файл vite.config.js:

  npm install @vitejs/plugin-react --save-dev

  В файле vite.config.js:

  import react from '@vitejs/plugin-react';
  
  export default {
    plugins: [react()],
  };

• После применения этих исправлений перезапустите сервер разработки Vite.

Ресурсы не загружаются после сборки приложения

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

Решение:

• Убедитесь, что используете относительные пути для ресурсов. Например, используется ./assets/logo.png вместо /assets/logo.png.

• Проверьте в файле vite.config.js правильный базовый путь. Если приложение развёрнуто в подкаталоге, может понадобиться установить параметр base:

  export default {
    base: '/subdirectory/',
  };

Следуя этим шагам по устранению неполадок, вы сможете решить распространённые проблемы и обеспечить бесперебойную работу вашего проекта Vite + React.

Заключение

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

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