Что такое Vite и почему он заменил приложение Create React?

Интерфейсные инструменты следующего поколения

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

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

Инструменты сервера разработки, такие как CRA (Create React App) или Vite, предназначены для настройки этих стандартных вещей только для того, чтобы вы могли создать новое приложение React, не настраивая ничего вручную.

Что заставило приложение Create React заменить?

Создание приложения React на протяжении многих лет был методом по умолчанию для создания нового приложения React.

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

Традиционно для создания реагирующего приложения с использованием CRA:

npx create-react-app amazing-app
cd amazing-app
npm start

Что сделало Vite популярным?

Vite (произносится как veet, что по-французски означает быстро). В отличие от CRA, Vite не перестраивает все приложение всякий раз, когда вносятся изменения, оно создается по запросу. Он разделяет приложение на две категории: зависимости и исходный код.

Зависимости. Это вещи, которые не часто меняются в процессе разработки. Эти пакеты используют esbuild, написаны на Go и работают намного быстрее, чем javascript.

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

Как использовать Vite?

Для совершенно нового проекта:

Создайте проект vite с помощью вашего любимого менеджера пакетов:

# yarn
yarn create vite

# npm
npm create vite@latest

2. Введите название вашего проекта в приглашении:

success Installed "[email protected]" with binaries:
      - create-vite
      - cva
? Project name: › amazing-app

3. Выберите фреймворк, который вы хотите использовать:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Others

4. Выберите вариант. Вы можете использовать обычный JavaScript или TypeScript, или любой из них плюс SWC. SWC — это транспилятор кода, очень похожий на Babel:

? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

5. Vite продолжит создание вашего проекта на основе вашего выбора:

Scaffolding project in /Users/nivetha/Projects/amazing-app...

Done. Now run:

  cd amazing-app
  yarn
  yarn dev

✨  Done in 505.68s.

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

# npm 6.x
npm create vite@latest amazing-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest amazing-app -- --template react

# yarn
yarn create vite amazing-app --template react

Ага! Ваш новый проект React Vite создан.

Перенесите свой проект Create React App в проект Vite:

Откройте файл package.json и удалите запись react-scripts из зависимостей:
Примечание. В вашем файле может быть другой номер версии.

"dependencies": {
  ...
  "react-scripts": "5.0.0", // Remove this line
  ...
},

2. Если вы используете CSS или SCSS, добавьте пакет sass npm в свои devDependencies:

# yarn
yarn add -D sass

# npm
npm i --save-dev sass

3. Добавьте пакеты vite и @vitejs/plugin-react npm в devDependencies:

# yarn
yarn add -D vite @vitejs/plugin-react

# npm
npm i --save-dev vite @vitejs/plugin-react

Теперь ваши package.json devDependencies должны включать следующие пакеты:

"devDependencies": {
  "sass": "1.58.3", // optional
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},

4. Откройте package.json и обновите сценарии, чтобы они соответствовали приведенным ниже:

"scripts": {
  "start": "vite",
  "build": "vite build"
},

5. Создайте файл vite.config.js в корневой папке и добавьте следующее:
Примечание. Плагин react() добавляется, чтобы вам не приходилось вручную импортировать React вверху каждого отдельного файла .jsx и .tsx.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default ({ mode }) => {
  return defineConfig({
    plugins: [react()],
    define: {
      "process.env.NODE_ENV": `"${mode}"`,
    }
  })
}

6. Переместите файл index.html из общей папки в корень проекта.

7. Удалите все экземпляры %PUBLIC_URL% из этого файла index.html:

// From
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

// To
<link rel="icon" href="/favicon.ico" />

8. Добавьте приведенный ниже тег script в тело этого файла index.html:

<div id="root"></div> // Should already exist
<script type="module" src="/src/index.jsx"></script> // Add this line

9. Если у вас есть файлы .env, замените REACT_APP на VITE:

// From
REACT_APP_ENV = local
REACT_APP_HOST_UR = https://reqres.in/api/

// To
VITE_ENV = local
VITE_HOST_URL = https://reqres.in/api/

10. Запустите npm или yarn в последний раз:

# yarn
yarn

# npm
npm install

11. Теперь запустите приложение

# yarn
yarn start

# npm
npm start

Поздравляем! Теперь ваше приложение CRA должно быть успешно перенесено на Vite.

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

Что такое Vite и почему он заменил приложение Create React?

Что заставило приложение Create React заменить?

Что сделало Vite популярным?

Похожие вопросы