14. Миграция с CRA

Create React App (CRA) долгое время был стандартом для React проектов, но он медленный и сложно конфигурируемый. Миграция на Vite — это инвестиция, которая окупается с первого же запуска dev-сервера.

Почему мигрировать с CRA?

CRA → Vite:
⏱ Холодный старт:     60+ секунд → <1 секунда
🔥 HMR обновление:    3-10 секунд → <100ms
📦 Зависимостей:      Скрытый webpack → явный конфиг
🔧 Конфигурация:     eject (всё или ничего) → vite.config.ts
🧪 Тесты:             Jest → Vitest (совместимый API!)

Пошаговая миграция

Шаг 1: Удали CRA зависимости

# Удаляем react-scripts
npm uninstall react-scripts

# Устанавливаем Vite и плагин
npm install -D vite @vitejs/plugin-react

# Если используешь TypeScript
npm install -D typescript @types/react @types/react-dom

Шаг 2: Создай vite.config.ts

// vite.config.ts (создай в корне проекта)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // Если использовал absolute imports через jsconfig.json
      'src': '/src',
    },
  },
})

Шаг 3: Перенеси index.html

# CRA: index.html находится в public/
public/index.html

# Vite: index.html должен быть в КОРНЕ проекта
# Перемести файл:
mv public/index.html index.html

<!-- Замени в index.html: -->

<!-- CRA placeholder -->
<!-- %PUBLIC_URL% -->
<!-- ↓ Удали все %PUBLIC_URL% префиксы: -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- ↓ Стало: -->
<link rel="icon" href="/favicon.ico" />

<!-- Добавь script тег для entry point: -->
<!-- CRA добавляет его автоматически -->
<!-- Vite требует явного указания: -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>

Шаг 4: Обнови package.json скрипты

{
  "scripts": {
    // CRA:
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

    // Vite:
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  }
}

Шаг 5: Переменные окружения

# CRA: REACT_APP_ префикс
REACT_APP_API_URL=http://localhost:8080

# Vite: VITE_ префикс
VITE_API_URL=http://localhost:8080

// CRA:
const url = process.env.REACT_APP_API_URL

// Vite:
const url = import.meta.env.VITE_API_URL

Шаг 6: TypeScript (если используешь)

// Создай или обнови src/vite-env.d.ts
/// <reference types="vite/client" />

// Обнови tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true
  },
  "include": ["src"]
}

Частые проблемы при миграции

// 1. CommonJS в node_modules
// Если пакет использует require(), Vite его pre-bundle через esbuild
// Обычно работает автоматически, но если нет:
optimizeDeps: {
  include: ['legacy-cjs-package'],
}

// 2. process.env в коде
// CRA полифиллит process.env, Vite — нет
// Замени: process.env.NODE_ENV → import.meta.env.MODE

// 3. Global переменные
// CRA: window.global = window (автоматически)
// Vite — добавь в vite.config.ts:
define: {
  global: 'globalThis',
  'process.env': process.env,
}

Ниже — интерактивный мастер миграции, показывающий что нужно изменить в каждом файле: