Berhijrah daripada Apl Buat React ke Vite: Panduan Pembangun-tutorial js-php.cn

Berhijrah daripada Apl Buat React ke Vite: Panduan Pembangun

DDD

Lepaskan： 2024-12-30 21:55:10

asal

963 orang telah melayarinya

Migrating from Create React App to Vite: A Developer

Berhijrah daripada Apl Buat React ke Vite: Panduan Pembangun

Hai, rakan pembangun! ?

Baru-baru ini, saya menyahut cabaran untuk memindahkan aplikasi React pengeluaran daripada Create React App (CRA) ke Vite. Hasilnya? Masa binaan kami merosot daripada 3 minit kepada 20 saat sahaja! ?

Dalam panduan ini, saya akan membimbing anda melalui keseluruhan proses migrasi, termasuk petua penting tentang pengendalian JSX dalam fail JavaScript yang boleh menjimatkan jam penyahpepijatan anda.

? Mengapa Bertukar kepada Vite?

Sebelum menyelami butiran teknikal, mari lihat sebab anda mungkin mahu membuat suis ini. Pasukan kami melihat beberapa peningkatan yang mengagumkan:

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%

Selain itu, anda mendapat ciri hebat ini:

⚡️ HMR sepantas kilat
? Tiada penggabungan dalam pembangunan
? Konfigurasi yang lebih mudah
? Mesej ralat yang lebih baik
? Sokongan Native TypeScript

? Langkah-langkah Migrasi

1. Sediakan Projek Anda

Mula-mula, buat cawangan baharu:

git checkout -b feature/migrate-to-vite

Salin selepas log masuk

2. Kemas kini Ketergantungan

Alih keluar CRA dan tambah Vite:

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

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

Salin selepas log masuk

3. Konfigurasikan Vite

Buat vite.config.js dalam akar projek anda:

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

Salin selepas log masuk

Penting: Termasuk: "**/*.{jsx,js}" konfigurasi adalah penting! Tanpa ini, Vite hanya memproses JSX dalam fail .jsx.

4. Pembolehubah Persekitaran

Vite mengendalikan pembolehubah persekitaran secara berbeza:

Simpan fail .env anda
Namakan semula pembolehubah daripada REACT_APP_ kepada VITE_
Kemas kini rujukan:

// Before (CRA)
process.env.REACT_APP_API_URL

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

Salin selepas log masuk

5. Kemas kini Skrip Pakej

Ganti skrip dalam package.json:

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

Salin selepas log masuk

6. Gerakkan index.html

Alihkan public/index.html ke akar
Kemas kini:

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

Salin selepas log masuk

2. Import Mutlak

Kemas kini vite.config.js:

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

Salin selepas log masuk

3. Sokongan SVG

Pasang dan konfigurasikan vite-plugin-svgr:

npm install -D vite-plugin-svgr

Salin selepas log masuk

import svgr from 'vite-plugin-svgr';

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

Salin selepas log masuk

✅ Senarai Semak Migrasi

Sebelum melakukan:

[ ] Pelayan pembangunan bermula
[ ] Penggantian Modul Panas berfungsi
[ ] Pembolehubah persekitaran boleh diakses
[ ] Proses binaan berjaya
[ ] Laluan import diselesaikan dengan betul
[ ] SVG dan aset dimuatkan
[ ] Modul CSS berfungsi

? Kesimpulan

Walaupun berhijrah dari CRA ke Vite mungkin kelihatan menakutkan, peningkatan prestasi menjadikannya berbaloi. Ingat:

Konfigurasikan pemprosesan JSX untuk fail .js lebih awal
Kemas kini pembolehubah persekitaran
Sahkan laluan import
Uji dengan teliti

Sudahkah anda memindahkan apl React anda ke Vite? Apakah cabaran yang anda hadapi? Kongsi pengalaman anda dalam ulasan!

Temui ini membantu? Ikuti saya untuk mendapatkan lebih banyak petua React dan JavaScript!

Saya akan membalas komen dan soalan secara aktif. Beritahu saya jika anda memerlukan sebarang penjelasan tentang proses penghijrahan!

Atas ialah kandungan terperinci Berhijrah daripada Apl Buat React ke Vite: Panduan Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!