Migration de l'application Create React vers Vite : guide du développeur-js tutoriel-php.cn

Migration de l'application Create React vers Vite : guide du développeur

DDD

Libérer： 2024-12-30 21:55:10

original

1056 Les gens l'ont consulté

Migrating from Create React App to Vite: A Developer

Migration de l'application Create React vers Vite : guide du développeur

Salut, amis développeurs ! ?

Récemment, j'ai relevé le défi de migrer une application de production React de Create React App (CRA) vers Vite. Les résultats? Nos temps de construction ont chuté de 3 minutes à seulement 20 secondes ! ?

Dans ce guide, je vous guiderai tout au long du processus de migration, y compris un conseil crucial sur la gestion de JSX dans les fichiers JavaScript qui pourrait vous faire économiser des heures de débogage.

? Pourquoi passer à Vite ?

Avant de plonger dans les détails techniques, voyons pourquoi vous pourriez vouloir effectuer ce changement. Notre équipe a constaté des améliorations impressionnantes :

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%

De plus, vous bénéficiez de ces fonctionnalités géniales :

⚡️ HMR ultra-rapide
? Pas de regroupement en développement
? Configuration plus simple
? De meilleurs messages d'erreur
? Prise en charge native de TypeScript

? Étapes de migration

1. Préparez votre projet

Tout d'abord, créez une nouvelle branche :

git checkout -b feature/migrate-to-vite

Copier après la connexion

2. Mettre à jour les dépendances

Supprimez CRA et ajoutez Vite :

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

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

Copier après la connexion

3. Configurer Vite

Créez vite.config.js à la racine de votre projet :

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

Copier après la connexion

Important : La configuration include : "**/*.{jsx,js}" est cruciale ! Sans cela, Vite ne traite JSX que dans les fichiers .jsx.

4. Variables d'environnement

Vite gère les variables d'environnement différemment :

Conservez vos fichiers .env
Renommer les variables de REACT_APP_ en VITE_
Mettre à jour les références :

// Before (CRA)
process.env.REACT_APP_API_URL

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

Copier après la connexion

5. Mettre à jour les scripts du package

Remplacer les scripts dans package.json :

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

Copier après la connexion

6. Déplacez index.html

Déplacez public/index.html vers la racine
Mettez-le à jour :

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

Copier après la connexion

2. Importations absolues

Mettre à jour vite.config.js :

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

Copier après la connexion

3. Prise en charge SVG

Installer et configurer vite-plugin-svgr :

npm install -D vite-plugin-svgr

Copier après la connexion

import svgr from 'vite-plugin-svgr';

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

Copier après la connexion

✅ Liste de contrôle de migration

Avant de vous engager :

[ ] Le serveur de développement démarre
[ ] Le remplacement du module chaud fonctionne
[ ] Les variables d'environnement sont accessibles
[ ] Le processus de construction réussit
[ ] Les chemins d'importation sont résolus correctement
[ ] Chargement du SVG et des actifs
[ ] Les modules CSS fonctionnent

? Conclusion

Bien que la migration de CRA vers Vite puisse sembler intimidante, les gains de performances en valent la peine. N'oubliez pas :

Configurez le traitement JSX pour les fichiers .js dès le début
Mettre à jour les variables d'environnement
Vérifier les chemins d'importation
Testez minutieusement

Avez-vous migré votre application React vers Vite ? À quels défis avez-vous été confronté ? Partagez vos expériences dans les commentaires !

Vous avez trouvé cela utile ? Suivez-moi pour plus de conseils React et JavaScript !

Je répondrai activement aux commentaires et aux questions. Faites-moi savoir si vous avez besoin d'éclaircissements sur le processus de migration !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!