مهاجرت از CRA به Vite

بسته محبوب (یا منفور) Create React App (CRA) از سال 2023 متوقف شده است، بیشتر را اینجا ببینید. این بدان معنی است که دیگر هیچ به روز رسانی دریافت نمی کند و هر روز منسوخ تر می شود. اگرچه هنوز برای برخی موارد گزینه معتبری است، اما دیگر برای برنامه های جدید و همچنین برنامه های موجود توصیه نمی شود. مستندات خود React دیگر استفاده از Create React App را توصیه نمی کند.

اگر منطقی نیست یا تیم شما منابع کافی برای مهاجرت به یک چارچوب پیچیده‌تر مانند Next.js ندارد، ممکن است گزینه‌های ساده‌تری مانند Vite را در نظر بگیرید.

وایت چیست؟

Vite، “سریع” یا “سریع” در فرانسوی، یک ابزار ساخت مدرن و سریع است که با React ادغام می شود. این برنامه یک تجربه توسعه سریع‌تر، کارآمدتر و آسان‌تر از Create React ارائه می‌دهد. درباره Vite بیشتر بدانید.

1. نصب وابستگی ها و به روز رسانی package.json

ابتدا باید چند وابستگی لازم برای استفاده از Vite را نصب کنیم.

npm install --save-dev vite @vitejs/plugin-react vite-ts-config-paths vite-plugin-svgr

سپس اسکریپت های خود را به روز کنید package.json برای استفاده از Vite

{
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  }
}

2. Removendo یا ایجاد React App

اکنون باید Create React App را به طور کامل از پروژه شما حذف کنیم. برای انجام این کار، به سادگی می توانیم بسته را حذف نصب کنیم react-scripts با استفاده از دستور:

npm uninstall react-scripts

اگر از TypeScript استفاده می کنید، فایل را نیز حذف کنید react-app-env.d.ts که باید در پوشه ریشه پروژه شما یا در پوشه باشد src.

3. پیکربندی Vite

برای پیکربندی Vite، یک فایل به نام ایجاد کنید vite.config.ts در ریشه پروژه خود و کد زیر را اضافه کنید:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-ts-config-paths";

export default defineConfig({
  plugins: [react(), svgr(), tsconfigPaths()],
  // Caso deseje manter um ambiente similar ao Create React App, pode adicionar as seguintes configurações:
  server: {
    host: "localhost",
    port: 3000,
  },
  base: "/",
  build: {
    outDir: "build", // O Vite por padrão gera o build na pasta "dist"
  },
});

اگر از TypeScript استفاده می کنید، یک فایل ایجاد کنید vite-env.d.ts در پوشه شما src برای تعریف اعلان‌های Vite در TypeScript:

// ./src/vite-env.d.ts
/// 

4. به روز رسانی index.html

در آخر باید فایل را جابجا کنید index.html به ریشه پروژه شما. احتمالا تو پوشه هست publicهمانطور که در Create React App استاندارد است، باید تمام ارجاعات به متغیر را نیز حذف کنید %PUBLIC_URL%.

به عنوان مثال، در مورد پیوند فاویکون:

 rel="icon" href="%PUBLIC_URL%/favicon.ico" />


 rel="icon" href="favicon.ico" />

با این کار، شما از قبل آنچه را که برای اجرای پروژه React خود با Vite نیاز دارید، دارید. با این حال، اگر در حال مهاجرت به یک برنامه بزرگتر و پیچیده تر هستید، با برخی خطاها مواجه می شوید. در زیر برخی از رایج ترین مشکلات و نحوه حل آنها آورده شده است.

متغیرهای محیطی

به طور پیش فرض، وقتی یک پروژه React را با استفاده از CRA ایجاد می کنیم، می توانیم از طریق شی به متغیرها دسترسی داشته باشیم process.env. با این حال، هنگامی که از Vite استفاده می کنیم، نمی توانیم به این متغیرها به همان روش دسترسی داشته باشیم، زیرا Vite متغیرهای خود را در شیء نمایش می دهد. import.meta.env. برای حل این مشکل کافی است کد زیر را به خود اضافه کنید vite.config.ts:

// vite.config.ts
export default defineConfig({
  ...
  define: {
    'process.env': {},
    'process.env.NODE_ENV': JSON.stringify(mode),
  },
  ...
});

علاوه بر این، در CRA ما معمولاً متغیرهای محیطی را با پیشوند اعلام می کنیم REACT_APP_، چیزی که در Vite انتظار نمی رود. Vite انتظار دارد که متغیرهای محیطی با پیشوند اعلان شوند VITE_. برای حل این مشکل، باید آن را اضافه کنید vite-plugin-environment.

npm install --save-dev vite-plugin-environment

و آن را به خود اضافه کنید vite.config.ts:

// vite.config.ts
import EnvironmentPlugin from "vite-plugin-environment";

export default defineConfig({
  plugins: [
    ...
    EnvironmentPlugin('all', { prefix: 'REACT_APP_' }),
  ],
  ...
});

با این حال، توصیه می شود از روشی که Vite آن را تعریف می کند، استفاده کنید import.meta.env برای دسترسی به متغیرها و پیشوندها VITE_. اما اگر پروژه شما بسیار بزرگ است و تلاش برای ایجاد این تغییر زیاد است، می توانید از گزینه های بالا استفاده کنید.

فایل های .js یا .ts

اگر پروژه شما دارای اجزای React با پسوند باشد، ممکن است هنگام مهاجرت به Vite با خطاهایی روبرو شوید .js یا .ts. Vite انتظار دارد فایل های JSX شما دارای پسوند باشند .jsx یا .tsx. توصیه می شود برای جلوگیری از بروز مشکل، نام فایل ها را تغییر دهید، اما می توان با افزونه زیر این مشکل را دور زد:

// vite.config.ts
import { defineConfig, Plugin, transformWithEsbuild } from 'vite';

export default defineConfig(() => ({
  plugins: [
    ...
    {
      name: 'treat-js-files-as-jsx',
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/)) return null;

        return transformWithEsbuild(code, id, {
          loader: 'jsx',
          jsx: 'automatic',
        });
      },
    },
  ],
  ...
}));

نتیجه

مهاجرت یک برنامه CRA به Vite ممکن است در ابتدا یک چالش به نظر برسد، اما مزایای آن از نظر عملکرد و سادگی در توسعه ارزش تلاش را دارد. با دنبال کردن مراحل این راهنما، می‌توانید مهاجرت را راحت‌تر انجام دهید و از مزایایی که Vite ارائه می‌دهد استفاده کنید.

امیدوارم این راهنما برای کمک به انتقال پروژه CRA خود به Vite مفید بوده باشد. موفق باشید!