Что такое вите и как его использовать с реагированием

Если вы еще не слышали об этом, Vite Это новый инструмент сборки для приложений Frontend (созданный Evan You, создателем Vue.js). Работает очень похоже на WebPack и Parcel, но быстрее («Vite» означает быстро на французском языке). Vite использует удивительный Эсбулд за кулисами. Esbuild – это JavaScript (и Teadycript) Bundler, написанный в Голан, который является одной из причин это так быстро.

Часто при создании нового проекта с реагированием рекомендуется начать с Create-raction-app Отказ Но теперь, когда Vite здесь, вы можете легко настроить новый проект с нуля самостоятельно, потому что Vite очень просто настроить.

Прежде чем начать, вам нужно будет установить Node.js и NPM (в комплекте с Node.js), если вы еще этого не сделали. Я буду использовать NPM в этом руководстве Но если вы предпочитаете пряжу или PNPM, не стесняйтесь использовать его.

Откройте свой терминал и создайте новый каталог:

mkdir react-vite-example

Переместить внутри этого каталога:

cd react-vite-example

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

npm init -y

После запуска команд вы должны иметь package.json Файл внутри вновь созданного каталога.

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

npm install --save react react-dom

И зависимости разработки:

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

(The @ Vitejs/plugin-regived-regived-reforge Библиотека будет использоваться для включения HMR A.K.A. Замена горячего модуля)

Добавьте следующие строки к package.json Сценарии:

// /package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

Создайте новый файл vite.config.js В корне проекта:

touch vite.config.js

Добавьте следующий контент:

// /vite.config.js
import reactRefresh from "@vitejs/plugin-react-refresh";
import vite from "vite";

const config = vite.defineConfig({
  plugins: [reactRefresh()],
});

export default config;

По умолчанию Vite ищет index.html файл в корне вашего проекта. Вот как он определит зависимости, необходимые для запуска вашего приложения (файлы JS, файлы CSS, активы и т. Д.).

Создать index.html Файл в корне проекта:

touch index.html

Добавьте следующий контент:

Вы можете увидеть, что есть ссылка на /src/index.jsx Файл в index.html Отказ Это будет точка записи JavaScript App App.

Создать /SRC каталог:

mkdir src

Создать /src/index.jsx файл:

touch src/index.jsx

Добавьте следующий контент:

import React from "react";
import { render } from "react-dom";

render(
Hello World!
, document.getElementById("root"));

Вот и все.

Теперь вы можете создать свое приложение в реакции и извлечь выгоду из скорости вите и HMR благодаря @ Vitejs/Plugin-React-Refresh Модуль, который мы установили.

Используйте NPM запустить Dev Команда для запуска локального сервера с HMR. Чтобы построить производственный пакет, используйте NPM запустить сборку Тогда вы можете просмотреть его с NPM Run обслуживает .

Производственный пакет будет в /св Каталог и тот, который вам нужно для развертывания на платформе хостинга (например, NetLify или Vercel ).

Я надеюсь, что это руководство было полезным! Конечно, это очень простое, я не покрыл, как использовать CSS и активы, Vite-Vite Vite уже поддерживает модули CSS (если файл заканчивается .module.css ) и импортирование активов, таких как изображения Так что нет дополнительного шага.

Вы можете найти полный пример на GitHub: https://github.com/ncribt/react-vite-example.

Узнайте больше постов от меня в моем личном блоге: https://naruhodo.dev.

Оригинал: “https://dev.to/naruhodo/what-is-vite-and-how-to-use-it-with-react-31cj”