Использование Vite в существующем проекте React

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

Также, если вам интересно, что такое Vite и, возможно, вы хотите его использовать, вы можете ознакомиться с моим последним уроком «Как использовать Vite с React».

Без лишних слов…

Что вам нужно иметь в наличии.

  1. Запущенное приложение react
  2. Хорошая сеть

Затем

Установите необходимые пакеты из терминала следующим образом

$ yarn add vite @vitejs/plugin-react-refresh
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Создайте файл vite.config.js в вашей корневой папке и добавьте следующий код

// vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()]
})
Войти в полноэкранный режим Выйти из полноэкранного режима

Этот файл config будет предварительно связывать ваши зависимости, когда sever запущен.

В корневой папке также отредактируйте файл package.json. Он определяет пакет для запуска, сборки и предварительного просмотра приложения с начального запуска react-create start

// package.json

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vite test",
    "eject": "vite eject"
  },
Вход в полноэкранный режим Выход из полноэкранного режима

Еще из корневой папки откройте папку /public и переместите файл index.html в родительскую папку.
В файле удалите все %PUBLIC_URL%, прикрепленные к любому <link.../> и тегу <script> и, следовательно, ссылку на соответствующий каталог, например, /src/index.js/.

<!-- Before edit -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />

<body>
...
    <div id="root"></div>
    <script type="module" src="/src/index.js"></script>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец,

Теперь вы можете запустить

$ yarn start
Войти в полноэкранный режим Выйти из полноэкранного режима

Счастливого кодирования.

Оцените статью
devanswers.ru
Добавить комментарий