Migration de l'application Create React vers Vite : un guide étape par étape

En tant que développeurs React, nous recherchons toujours des moyens d'améliorer notre expérience de développement et les performances de nos applications. Une mise à niveau importante que vous pourriez envisager consiste à migrer de Create React App (CRA) vers Vite. Vite offre des temps de construction plus rapides, un remplacement de module à chaud (HMR) plus rapide et une expérience de développement plus rationalisée. Dans ce guide complet, nous passerons en revue le processus de migration de votre projet CRA vers Vite, y compris la gestion des serveurs proxy et l'activation de la compression Gzip.

Table des matières

1. Pourquoi migrer vers Vite ?
2. Prérequis
3. Étape 1 : Créer un nouveau projet Vite
4. Étape 2 : Déplacez votre code source
5. Étape 3 : Mettre à jour Package.json
6. Étape 4 : Configurer Vite
7. Étape 5 : Mettre à jour les déclarations d'importation
8. Étape 6 : Gérer les variables d'environnement
9. Étape 7 : Mettre à jour la configuration du test
10. Étape 8 : Configurer le serveur proxy
11. Étape 9 : Activer la compression Gzip
12. Étape 10 : Nettoyage final
13. Conclusion

Pourquoi migrer vers Vite ?

Avant de plonger dans le processus de migration, expliquons brièvement pourquoi vous souhaiterez peut-être passer de CRA à Vite :

1. Démarrage plus rapide du serveur de développement : Vite utilise des modules ES natifs, ce qui réduit considérablement le temps nécessaire au démarrage de votre serveur de développement.
2. Remplacement plus rapide du module à chaud (HMR) : les modifications apportées à votre code sont reflétées presque instantanément dans le navigateur.
3. Performances de build améliorées : les builds de production de Vite sont souvent plus rapides et aboutissent à des tailles de bundles plus petites.
4. Configuration plus flexible : Vite permet une personnalisation plus facile de votre processus de construction.

Conditions préalables

Avant de commencer le processus de migration, assurez-vous d'avoir :

• Node.js (version 18+)
• npm ou Fil
• Un projet Create React App que vous souhaitez migrer

Étape 1 : Créer un nouveau projet Vite

Tout d'abord, créons un nouveau projet Vite :

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

Cette commande crée un nouveau projet Vite avec le modèle React. Nous l'utiliserons comme base pour notre migration.

Étape 2 : déplacez votre code source

Maintenant, déplaçons votre code source existant du projet CRA vers le nouveau projet Vite :

1. Copiez le répertoire src de votre projet CRA vers le nouveau projet Vite, en remplaçant le répertoire src existant.
2. Copiez tous les répertoires supplémentaires que vous pourriez avoir (par exemple, public, actifs) à la racine du projet Vite.

Étape 3 : Mettre à jour Package.json

Nous devons mettre à jour le fichier package.json pour inclure toutes les dépendances de votre projet CRA :

1. Copiez les dépendances et devDependencies du package.json de votre projet CRA vers le package.json du nouveau projet Vite.
2. Supprimez les dépendances spécifiques à l'ARC telles que les scripts de réaction.
3. Ajouter des scripts spécifiques à Vite :

"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. Installez les dépendances :

npm install

Étape 4 : Configurer Vite

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

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

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

Cette configuration configure le plugin React, définit un alias pour le répertoire src et définit le port du serveur de développement sur 3000 (correspondant à la valeur par défaut de CRA).

Étape 5 : Mettre à jour les déclarations d'importation

Vite utilise des modules ES, vous devrez donc peut-être mettre à jour certaines de vos instructions d'importation :

1. Remplacez import React from 'react' par import * as React from 'react' dans les fichiers où vous n'utilisez pas JSX.
2. Mettez à jour toutes les importations qui utilisent des alias spécifiques à l'ARC (comme src/) pour utiliser votre nouvel alias (@/) ou des chemins relatifs.

Étape 6 : Gérer les variables d'environnement

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

1. Renommer les fichiers .env pour utiliser le préfixe Vite : .env, .env.local, .env.development, .env.production.
2. Mettez à jour l'utilisation des variables d'environnement dans votre code :
   • Remplacez process.env.REACT_APP_* par import.meta.env.VITE_*
   • Dans vos fichiers .env, renommez les variables de REACT_APP_* en VITE_*

Étape 7 : Mettre à jour la configuration du test

Si vous utilisez Jest avec CRA, vous devrez passer à Vitest, qui est mieux intégré à Vite :

1. Installez Vitest et les packages associés :

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

1. Créez un fichier vitest.config.js à la racine de votre projet :

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. Mettez à jour vos fichiers de test pour utiliser la syntaxe Vitest (la plupart des tests Jest devraient fonctionner avec un minimum de modifications).

Étape 8 : configurer le serveur proxy

Si votre projet CRA a utilisé une configuration proxy, vous devrez la configurer dans Vite :

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!

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!