Berhijrah daripada Apl Buat React ke Vite: Panduan Langkah demi Langkah

Sebagai pembangun React, kami sentiasa mencari cara untuk meningkatkan pengalaman pembangunan dan prestasi aplikasi kami. Satu peningkatan penting yang mungkin anda pertimbangkan ialah berhijrah daripada Create React App (CRA) ke Vite. Vite menawarkan masa binaan yang lebih pantas, penggantian modul panas (HMR) yang lebih cepat dan pengalaman pembangunan yang lebih diperkemas. Dalam panduan komprehensif ini, kami akan melalui proses pemindahan projek CRA anda ke Vite, termasuk mengendalikan pelayan proksi dan mendayakan pemampatan Gzip.

Jadual Kandungan

1. Kenapa Berhijrah ke Vite?
2. Prasyarat
3. Langkah 1: Buat Projek Vite Baharu
4. Langkah 2: Alihkan Kod Sumber Anda
5. Langkah 3: Kemas Kini Package.json
6. Langkah 4: Konfigurasikan Vite
7. Langkah 5: Kemas Kini Penyata Import
8. Langkah 6: Kendalikan Pembolehubah Persekitaran
9. Langkah 7: Kemas Kini Konfigurasi Ujian
10. Langkah 8: Konfigurasikan Pelayan Proksi
11. Langkah 9: Dayakan Pemampatan Gzip
12. Langkah 10: Pembersihan Akhir
13. Kesimpulan

Mengapa Berhijrah ke Vite?

Sebelum kita menyelami proses penghijrahan, mari kita bincangkan secara ringkas sebab anda mungkin ingin bertukar daripada CRA kepada Vite:

1. Permulaan pelayan pembangunan yang lebih pantas: Vite menggunakan modul ES asli, yang mengurangkan masa yang diperlukan untuk memulakan pelayan pembangunan anda dengan ketara.
2. Penggantian modul panas yang lebih pantas (HMR): Perubahan dalam kod anda ditunjukkan hampir serta-merta dalam penyemak imbas.
3. Prestasi binaan yang dipertingkatkan: Binaan pengeluaran Vite selalunya lebih pantas dan menghasilkan saiz berkas yang lebih kecil.
4. Konfigurasi yang lebih fleksibel: Vite membolehkan penyesuaian lebih mudah bagi proses binaan anda.

Prasyarat

Sebelum memulakan proses migrasi, pastikan anda mempunyai:

• Node.js (versi 18+)
• npm atau Benang
• Projek Create React App yang ingin anda pindahkan

Langkah 1: Buat Projek Vite Baharu

Mula-mula, mari buat projek Vite baharu:

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

Arahan ini mencipta projek Vite baharu dengan templat React. Kami akan menggunakan ini sebagai asas untuk penghijrahan kami.

Langkah 2: Alihkan Kod Sumber Anda

Sekarang, mari alihkan kod sumber sedia ada anda daripada projek CRA ke projek Vite baharu:

1. Salin direktori src daripada projek CRA anda ke projek Vite baharu, menggantikan direktori src sedia ada.
2. Salin mana-mana direktori tambahan yang mungkin anda miliki (cth., awam, aset) ke akar projek Vite.

Langkah 3: Kemas kini Package.json

Kami perlu mengemas kini fail package.json untuk memasukkan semua kebergantungan daripada projek CRA anda:

1. Salin dependencies dan devDependencies daripada package.json projek CRA anda ke package.json projek Vite baharu.
2. Alih keluar kebergantungan khusus CRA seperti skrip reaksi.
3. Tambahkan skrip khusus 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. Pasang kebergantungan:

npm install

Langkah 4: Konfigurasikan Vite

Buat fail vite.config.js dalam akar projek anda:

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

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

Konfigurasi ini menyediakan pemalam React, mentakrifkan alias untuk direktori src dan menetapkan port pelayan pembangunan kepada 3000 (padanan lalai CRA).

Langkah 5: Kemas kini Penyata Import

Vite menggunakan modul ES, jadi anda mungkin perlu mengemas kini beberapa penyata import anda:

1. Ganti import React from 'react' dengan import * sebagai React from 'react' dalam fail yang anda tidak menggunakan JSX.
2. Kemas kini sebarang import yang menggunakan alias khusus CRA (seperti src/) untuk menggunakan alias baharu anda (@/) atau laluan relatif.

Langkah 6: Mengendalikan Pembolehubah Persekitaran

Vite mengendalikan pembolehubah persekitaran secara berbeza daripada CRA:

1. Namakan semula fail .env untuk menggunakan awalan Vite: .env, .env.local, .env.development, .env.production.
2. Kemas kini penggunaan pembolehubah persekitaran dalam kod anda:
   • Tukar process.env.REACT_APP_* kepada import.meta.env.VITE_*
   • Dalam fail .env anda, namakan semula pembolehubah daripada REACT_APP_* kepada VITE_*

Langkah 7: Kemas kini Konfigurasi Ujian

Jika anda menggunakan Jest dengan CRA, anda perlu bertukar kepada Vitest, yang lebih disepadukan dengan Vite:

1. Pasang Vitest dan pakej yang berkaitan:

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

1. Buat fail vitest.config.js dalam akar projek anda:

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. Kemas kini fail ujian anda untuk menggunakan sintaks Vitest (kebanyakan ujian Jest harus berfungsi dengan perubahan yang minimum).

Langkah 8: Konfigurasikan Pelayan Proksi

Jika projek CRA anda menggunakan konfigurasi proksi, anda perlu menyediakannya dalam 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!

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