Heim >Web-Frontend >js-Tutorial >Migration von Create React App zu Vite: Ein Entwicklerhandbuch

Migration von Create React App zu Vite: Ein Entwicklerhandbuch

DDDOriginal: 2024-12-30 21:55:10954Durchsuche

Migrating from Create React App to Vite: A Developer

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	<100ms
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:

Behalten Sie Ihre .env-Dateien
Variablen von REACT_APP_ in VITE_ umbenennen
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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
  </head>
  <body>
    <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:

JSX-Verarbeitung für .js-Dateien frühzeitig konfigurieren
Umgebungsvariablen aktualisieren
Importpfade überprüfen
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!

Das obige ist der detaillierte Inhalt vonMigration von Create React App zu Vite: Ein Entwicklerhandbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript typescript json css html if switch for while include Error public JS this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fastly CLI auf npm: jetzt per JavaScript für Sie verfügbarNächster Artikel：Fastly CLI auf npm: jetzt per JavaScript für Sie verfügbar

In Verbindung stehende Artikel

Mehr sehen