Migration von Create React App zu Vite: Eine Schritt-für-Schritt-Anleitung

Als React-Entwickler sind wir immer auf der Suche nach Möglichkeiten, unsere Entwicklungserfahrung und Anwendungsleistung zu verbessern. Ein wichtiges Upgrade, das Sie in Betracht ziehen könnten, ist die Migration von Create React App (CRA) zu Vite. Vite bietet schnellere Bauzeiten, einen schnelleren Austausch von Hot-Modulen (HMR) und eine optimierte Entwicklungserfahrung. In diesem umfassenden Leitfaden führen wir Sie durch den Prozess der Migration Ihres CRA-Projekts zu Vite, einschließlich der Handhabung von Proxy-Servern und der Aktivierung der Gzip-Komprimierung.

Inhaltsverzeichnis

1. Warum zu Vite migrieren?
2. Voraussetzungen
3. Schritt 1: Erstellen Sie ein neues Vite-Projekt
4. Schritt 2: Verschieben Sie Ihren Quellcode
5. Schritt 3: Package.json aktualisieren
6. Schritt 4: Vite konfigurieren
7. Schritt 5: Importanweisungen aktualisieren
8. Schritt 6: Umgebungsvariablen verarbeiten
9. Schritt 7: Testkonfiguration aktualisieren
10. Schritt 8: Konfigurieren Sie den Proxyserver
11. Schritt 9: Gzip-Komprimierung aktivieren
12. Schritt 10: Endreinigung
13. Fazit

Warum zu Vite migrieren?

Bevor wir uns mit dem Migrationsprozess befassen, besprechen wir kurz, warum Sie möglicherweise von CRA zu Vite wechseln möchten:

1. Schnellerer Start des Entwicklungsservers: Vite verwendet native ES-Module, was die Zeit zum Starten Ihres Entwicklungsservers erheblich verkürzt.
2. Schnellerer Hot-Module-Austausch (HMR): Änderungen in Ihrem Code werden fast sofort im Browser widergespiegelt.
3. Verbesserte Build-Leistung: Die Produktions-Builds von Vite sind oft schneller und führen zu kleineren Bundle-Größen.
4. Flexiblere Konfiguration: Vite ermöglicht eine einfachere Anpassung Ihres Build-Prozesses.

Voraussetzungen

Bevor Sie mit dem Migrationsprozess beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Node.js (Version 18+)
• npm oder Garn
• Ein Create React App-Projekt, das Sie migrieren möchten

Schritt 1: Erstellen Sie ein neues Vite-Projekt

Erstellen wir zunächst ein neues Vite-Projekt:

npm create vite@latest my-vite-app -- --template react
cd my-vite-app

Dieser Befehl erstellt ein neues Vite-Projekt mit React-Vorlage. Wir werden dies als Basis für unsere Migration verwenden.

Schritt 2: Verschieben Sie Ihren Quellcode

Jetzt verschieben wir Ihren vorhandenen Quellcode vom CRA-Projekt in das neue Vite-Projekt:

1. Kopieren Sie das src-Verzeichnis aus Ihrem CRA-Projekt in das neue Vite-Projekt und ersetzen Sie dabei das vorhandene src-Verzeichnis.
2. Kopieren Sie alle zusätzlichen Verzeichnisse, die Sie möglicherweise haben (z. B. öffentlich, Assets), in das Stammverzeichnis des Vite-Projekts.

Schritt 3: Package.json aktualisieren

Wir müssen die Datei package.json aktualisieren, um alle Abhängigkeiten Ihres CRA-Projekts einzuschließen:

1. Kopieren Sie die Abhängigkeiten und devDependencies aus der package.json Ihres CRA-Projekts in die package.json des neuen Vite-Projekts.
2. Entfernen Sie CRA-spezifische Abhängigkeiten wie React-Scripts.
3. Vite-spezifische Skripte hinzufügen:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "test": "vitest",
  "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
}

1. Installieren Sie die Abhängigkeiten:

npm install

Schritt 4: Vite konfigurieren

Erstellen Sie eine vite.config.js-Datei im Stammverzeichnis Ihres Projekts:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
})

Diese Konfiguration richtet das React-Plugin ein, definiert einen Alias ​​für das src-Verzeichnis und setzt den Entwicklungsserver-Port auf 3000 (entspricht der CRA-Standardeinstellung).

Schritt 5: Importanweisungen aktualisieren

Vite verwendet ES-Module, daher müssen Sie möglicherweise einige Ihrer Importanweisungen aktualisieren:

1. Ersetzen Sie import React from 'react' durch import * as React from 'react' in Dateien, in denen Sie JSX nicht verwenden.
2. Aktualisieren Sie alle Importe, die CRA-spezifische Aliase (wie src/) verwenden, um Ihren neuen Alias ​​(@/) oder relative Pfade zu verwenden.

Schritt 6: Behandeln Sie Umgebungsvariablen

Vite behandelt Umgebungsvariablen anders als CRA:

1. Benennen Sie .env-Dateien um, um das Vite-Präfix zu verwenden: .env, .env.local, .env.development, .env.produktion.
2. Aktualisieren Sie die Verwendung von Umgebungsvariablen in Ihrem Code:
   • Ändern Sie „process.env.REACT_APP_*“ in „import.meta.env.VITE_*“
   • Benennen Sie in Ihren .env-Dateien Variablen von REACT_APP_* in VITE_* um.

Schritt 7: Testkonfiguration aktualisieren

Wenn Sie Jest mit CRA verwenden, müssen Sie zu Vitest wechseln, das besser in Vite integriert ist:

1. Installieren Sie Vitest und verwandte Pakete:

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

1. Erstellen Sie eine vitest.config.js-Datei in Ihrem Projektstammverzeichnis:

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
})

1. Aktualisieren Sie Ihre Testdateien, um die Vitest-Syntax zu verwenden (die meisten Jest-Tests sollten mit minimalen Änderungen funktionieren).

Schritt 8: Konfigurieren Sie den Proxyserver

Wenn Ihr CRA-Projekt eine Proxy-Konfiguration verwendet, müssen Sie diese in Vite einrichten:

1. Install http-proxy:

npm install -D http-proxy

1. Update your vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import httpProxy from 'http-proxy'

const proxy = httpProxy.createProxyServer()

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        configure: (proxy, options) => {
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyReq', (proxyReq, req, res) => {
            console.log('Sending Request to the Target:', req.method, req.url)
          })
          proxy.on('proxyRes', (proxyRes, req, res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url)
          })
        },
      },
    },
  },
})

This configuration sets up a proxy for /api requests to http://localhost:5000. Adjust the target URL as needed for your backend.

Step 9: Enable Gzip Compression

To enable Gzip compression in Vite:

1. Install the vite-plugin-compression plugin:

npm install -D vite-plugin-compression

1. Update your vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
  // ... other configurations
})

This setup will generate Gzip-compressed versions of your assets during the build process.

Step 10: Final Cleanup

1. Remove any CRA-specific files and folders:

   • Delete config-overrides.js if you were using react-app-rewired
   • Remove the eject script from package.json

2. Update your README.md to reflect the new Vite setup and commands.

3. Update your CI/CD pipelines to use the new Vite commands (npm run dev, npm run build, etc.).

Conclusion

Migrating from Create React App to Vite can significantly improve your development experience and application performance. While the process involves several steps, the benefits of faster build times, quicker HMR, and more flexible configuration make it a worthwhile endeavor.

Remember to thoroughly test your application after migration to ensure everything works as expected. You may need to make additional adjustments based on your specific project structure and dependencies.

Have you successfully migrated your project from CRA to Vite? Share your experiences and any additional tips in the comments below!

Happy coding!

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