Migration von Create React App zu Vite: Ein Entwicklerhandbuch-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Migration von Create React App zu Vite: Ein Entwicklerhandbuch

DDD

Dec 30, 2024 pm 09:55 PM

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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,
  },
});

Nach dem Login kopieren

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

Nach dem Login kopieren

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"
  }
}

Nach dem Login kopieren

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"' _ {} \;

Nach dem Login kopieren

2. Absolute Importe

Vite.config.js aktualisieren:

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

Nach dem Login kopieren

3. SVG-Unterstützung

Vite-plugin-svgr installieren und konfigurieren:

npm install -D vite-plugin-svgr

Nach dem Login kopieren

import svgr from 'vite-plugin-svgr';

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

Nach dem Login kopieren

✅ 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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man Wölfe zähme

1 Monate vor By DDD

Kraftstufen für jeden Feind & Monster in R.E.P.O.

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

2 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1662

CakePHP-Tutorial

1419

Laravel-Tutorial

1311

PHP-Tutorial

1262

C#-Tutorial

1234

Related knowledge

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten Apr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

JavaScript -Engines: Implementierungen vergleichen Apr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

JavaScript: Erforschung der Vielseitigkeit einer Websprache Apr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration) Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit Apr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Von C/C nach JavaScript: Wie alles funktioniert Apr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration) Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

See all articles