تغییر به Vite از React-Scripts

من یک پروژه react احمقانه دارم که روی آن کار می کنم و با استفاده از Create-react-app ساخته ام. به طور پیش‌فرض، این نوع پروژه‌ها با استفاده از react-scripts ساخته و اجرا می‌شوند که از webpack در زیر هود برای ساخت پروژه‌ها استفاده می‌کنند. Vite به طور کلی سریعتر از Webpack ⚡ شناخته شده است، بنابراین من کنجکاو بودم که چگونه آنها را تعویض کنم.

نصب به اندازه کافی ساده است، دو ماژول وابستگی توسعه دهنده وجود دارد که باید گنجانده شوند:
پلاگین Vite و Vite’s React

برای استفاده از Vite، با ایجاد یک شروع کنید vite.config.js فایل. در اینجا یک مثال بسیار اساسی از آنچه اضافه کردم آورده شده است:

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

export default defineConfig({
    plugins: [react()].
    root: 'src',
});

از آنجایی که Vite استفاده می کند index.html به عنوان نقطه ورود برنامه، آن را از برنامه خود خارج کردم public پوشه و به من src پوشه را حذف کردم %PUBLIC_URL% بخشی از فایل HTML من و یک اسکریپت برای اشاره به جایی که ریشه react من ایجاد شده است اضافه کردم:

تنها چیزی که باقی می ماند این است که اسکریپت ها را جایگزین کنید package.json برای استفاده از دستورات vite و حذف react-scripts به عنوان یک وابستگی 🎉