Create React App'ten Vite'a geçiş nasıl yapılır

1. Bağımlılıkları değiştir

react-scripts paketini kaldır, Vite ve React eklentisini ekle.

npm uninstall react-scripts
npm install -D vite @vitejs/plugin-react

2. index.html dosyasını proje köküne taşı

Create React App bundle'ı senin yerine ekler. Vite eklemez; bu yüzden index.html proje kökünde durur ve giriş dosyasını açıkça gösterir. Tüm %PUBLIC_URL% ifadelerini sil, çünkü public/ içindeki dosyalar sitenin kökünden sunulur.

<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>

3. vite.config.js dosyasını ekle

React eklentisini etkinleştir. Yayın ortamın eski build klasörünü bekliyorsa outDir değerini build yap, çünkü Vite varsayılan olarak dist kullanır.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  build: { outDir: "build" },
});

4. JSX içeren dosyaları yeniden adlandır

Vite JSX'i yalnızca .jsx ve .tsx uzantılı dosyalarda işler. JSX içeren tüm .js dosyalarını, src/index.js ve src/App.js dahil, yeniden adlandır; import'ları ve index.html içindeki script etiketini güncelle.

5. Ortam değişkenlerini değiştir

Vite yalnızca VITE_ ile başlayan değişkenleri açar ve bunları process.env yerine import.meta.env üzerinden okur.

• .env dosyalarında REACT_APP_API_URL adını VITE_API_URL yap.
• Kodda process.env.REACT_APP_API_URL yerine import.meta.env.VITE_API_URL kullan.
• process.env.NODE_ENV kontrollerini import.meta.env.MODE ya da import.meta.env.DEV ve import.meta.env.PROD ile değiştir.

6. Script'leri güncelle ve başka neyin bozulduğuna bak

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

• jsconfig.json baseUrl ile verilen mutlak import'lar için vite.config.js içinde resolve.alias tanımla.
• React bileşeni olarak içe aktarılan SVG'ler için vite-plugin-svgr eklentisi gerekir.
• Jest testleri neredeyse aynı API'ye sahip Vitest'e taşınmalıdır.

npm run build ve npm run preview çalıştır, sonra ana sayfaları tek tek gez. Bu aşamadaki hataların çoğu unutulmuş bir ortam değişkeni ya da hâlâ .js uzantılı olan bir JSX dosyasıdır.