Migration von Create React App zu Vite: Ein Entwicklerhandbuch

Migration von Create React App zu Vite: Ein Entwicklerhandbuch

Hallo, liebe Entwickler! ?

Kürzlich habe ich mich der Herausforderung gestellt, eine Produktions-React-Anwendung von Create React App (CRA) zu Vite zu migrieren. Die Ergebnisse? Unsere Bauzeit sank von 3 Minuten auf nur 20 Sekunden! ?

In diesem Leitfaden werde ich Sie durch den gesamten Migrationsprozess führen, einschließlich eines wichtigen Tipps zum Umgang mit JSX in JavaScript-Dateien, der Ihnen stundenlanges Debuggen ersparen kann.

? Warum zu Vite wechseln?

Bevor wir uns mit den technischen Details befassen, schauen wir uns an, warum Sie diesen Wechsel möglicherweise vornehmen möchten. Unser Team konnte einige beeindruckende Verbesserungen feststellen:

Metric	Before (CRA)	After (Vite)
Dev Server Startup	30s	2s
Hot Module Replacement	2-3s
Production Build	3 min	20s
Bundle Size	100%	85%

Außerdem erhalten Sie diese tollen Funktionen:

• ⚡️ Blitzschnelles HMR
• ? Keine Bündelung in der Entwicklung
• ? Einfachere Konfiguration
• ? Bessere Fehlermeldungen
• ? Native TypeScript-Unterstützung

? Migrationsschritte

1. Bereiten Sie Ihr Projekt vor

Erstellen Sie zunächst einen neuen Zweig:

git checkout -b feature/migrate-to-vite

2. Abhängigkeiten aktualisieren

CRA entfernen und Vite hinzufügen:

# Remove CRA dependencies
npm uninstall react-scripts @craco/craco

# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react

3. Konfigurieren Sie Vite

Erstellen Sie vite.config.js in Ihrem Projektstammverzeichnis:

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

export default defineConfig({
  plugins: [
    react({
      // ? Key configuration for .js files with JSX
      include: "**/*.{jsx,js}",
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
  },
});

Wichtig: Die include: „**/*.{jsx,js}“-Konfiguration ist entscheidend! Ohne dies verarbeitet Vite JSX nur in .jsx-Dateien.

4. Umgebungsvariablen

Vite behandelt Umgebungsvariablen unterschiedlich:

1. Behalten Sie Ihre .env-Dateien
2. Variablen von REACT_APP_ in VITE_ umbenennen
3. Referenzen aktualisieren:

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

5. Paketskripte aktualisieren

Skripte in package.json ersetzen:

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src --ext .js,.jsx"
  }
}

6. Verschieben Sie index.html

1. Verschieben Sie public/index.html nach Root
2. Aktualisieren Sie es:

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App Name</title>
  
  
    <div>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

2. Absolute Importe

Vite.config.js aktualisieren:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

3. SVG-Unterstützung

Vite-plugin-svgr installieren und konfigurieren:

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  // ...
});

✅ Migrationscheckliste

Vor der Verpflichtung:

• [ ] Entwicklungsserver startet
• [ ] Hot Module Replacement funktioniert
• [ ] Umgebungsvariablen sind zugänglich
• [ ] Build-Prozess erfolgreich
• [ ] Importpfade werden korrekt aufgelöst
• [ ] SVG und Assets werden geladen
• [ ] CSS-Module funktionieren

? Abschluss

Auch wenn die Migration von CRA zu Vite entmutigend erscheinen mag, lohnt sich die Leistungssteigerung. Denken Sie daran:

1. JSX-Verarbeitung für .js-Dateien frühzeitig konfigurieren
2. Umgebungsvariablen aktualisieren
3. Importpfade überprüfen
4. Gründlich testen

Haben Sie Ihre React-App auf Vite migriert? Vor welchen Herausforderungen standen Sie? Teilen Sie Ihre Erfahrungen in den Kommentaren!

---

Fanden Sie das hilfreich? Folgen Sie mir für weitere React- und JavaScript-Tipps!

Ich werde aktiv auf Kommentare und Fragen antworten. Lassen Sie mich wissen, wenn Sie Erläuterungen zum Migrationsprozess benötigen!