در Symfony با Vite واکنش نشان دهید

مشکل روز: من می‌خواهم وارد React شوم، اما با یک بک‌اند Symfony.

خوب، شما به من می گویید که از Webpack Encore استفاده کنم و حق با شماست… به جز اینکه وب پک کند است، به خصوص در فاز توسعه.

بنابراین ایده این است که بفهمیم چگونه Vite را در پروژه خود ادغام کنیم و چگونه Vite را برای اجرای React پیکربندی کنیم.

بیایید پروژه Symfony خود را ایجاد کنیم (6)

هیچ چیز در اینجا با Symfony CLI پیچیده نیست:

symfony new --webapp reactSymfonyProject

Vite را در پروژه Symfony من ادغام کنید

خوشبختانه، کسی آن را برای ما رقم زد (اگرچه انجام آن با دست نیز غیر ممکن نبود). بنابراین یک بسته نرم افزاری برای آن وجود دارد!

دایرکتوری پروژه را وارد کرده و بسته را نصب کنید:

composer require pentatrion/vite-bundle

در اینجا نتیجه نصب است:

بنابراین همانطور که نشان داده شد، از مرحله اول صرف نظر می کنیم – به طور خلاصه، پارامترهای پیش فرض را ترک می کنیم.
اگر دومی همچنان ارزش نگاه کردن را دارد (به فایل vite.config.js همانطور که نشان داده شده است نگاهی بیندازید)، فایل نیازی به تغییر ندارد.

مرحله 3 را دنبال کنید و وابستگی های جاوا اسکریپت را نصب کنید

yarn install (ou npm install)

در نهایت، ما می‌خواهیم قالب اصلی Twig خود را تغییر دهیم تا نتیجه کامپایل Vite را بدست آوریم.

در فایل templates/base.html.twig، خط را جایگزین کنید:
{{ encore_entry_link_tags('app') }}
همتراز
{{ vite_entry_link_tags('app') }}

سپس خط:
{{ encore_entry_script_tags('app') }}
همتراز
{{ vite_entry_script_tags('app', { dependency: 'react' }) }}

ایجاد یک کنترلر تست

در اصل پروژه:

symfony console make:controller Test

اکنون یک URL /test در دسترس داریم

تست برتر

همه اینها را شروع خواهیم کرد و نتیجه را خواهیم دید

ابتدا سرور PHP داخلی را راه اندازی می کنیم:
symfony serve -d

سپس دارایی های خود را جمع آوری می کنیم:
yarn dev

اکنون به مرورگر خود در آدرس زیر بروید:
https://127.0.0.1:8000/test

توجه: پورت 8000 ممکن است در نصب شما متفاوت باشد. هنگام راه اندازی سرور PHP آدرس داده می شود.

حالا با باز کردن کنسول جاوا اسکریپت (F12) نتیجه را ببینید:

ما در اینجا می بینیم که نتیجه اسکریپت assets/app.js خود را می یابیم و Vite واقعاً در حالت dev راه اندازی شده است.

می توانید تست کنید تا ببینید Vite در مقایسه با Webpack چقدر قدرتمند است.

هر کدام را در انتهای فایل assets/app.js اضافه کنید console.log('plop')و بدون بارگیری مجدد صفحه مرورگر، فوراً نتیجه را در کنسول مشاهده کنید!

برای Vite خوب است، اما برای React؟

در حال حاضر ما موافقیم، Quick کار می کند اما React در چشم نیست (به شوخی React – Vue توجه کنید).

ما 2 چیز را از دست می دهیم: البته کد، اما همچنین وابستگی ها.

بیایید آنها را نصب کنیم:

yarn add -D @vitejs/plugin-react @types/react @types/react-dom
yarn add react react-dom

اکنون جاوا اسکریپت خود را تغییر می دهیم و مقداری React انجام می دهیم.

فایل assets/app.js را باز کنید و آن را به صورت زیر تبدیل کنید:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import "./app.css";

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
)

همانطور که می بینید، ما قصد داریم برنامه خود را در عنصری با شناسه “root” “رندر” کنیم.

فعلا نداریم برای انجام این کار، صفحه آزمایشی خود (فایل templates/test/index.html.twig) را به صورت زیر تغییر می دهیم:

{% extends 'base.html.twig' %}

{% block title %}Hello TestController!{% endblock %}

{% block body %}
<div id="root"></div>
{% endblock %}

ما می خواهیم Quick را مجددا راه اندازی کنیم و ببینیم چه اتفاقی می افتد …
در ریشه پروژه، Vite را مجدداً راه اندازی کنید.
yarn dev

اوه، یک خطای بزرگ ظاهر می شود و طبیعی است:

ما JSX را در یک فایل با پسوند “.js” قرار می دهیم.
به دلایل عملی، نام app.js خود را به main.jsx تغییر می دهیم

همچنین فراموش نکنیم vite.config.js خود را با اشاره به فایل main.jsx به جای app.js تغییر دهیم. همچنین از این فرصت استفاده می کنیم و به Vite می گوییم که از پلاگین React آن استفاده می کنیم. بنابراین فایل vite.config.js شما باید به شکل زیر باشد:

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


export default defineConfig({
    plugins: [
        react(),
        symfonyPlugin(),
    ],
    build: {
        rollupOptions: {
            input: {
                app: "./assets/main.jsx"
            },
        }
    },
});

Vite را مجدداً راه اندازی کنید و ببینید که یک خطای جدید دارید … طبیعی است، ما کدمان را کامل نکرده ایم؛)
ما در فایل main.jsx خود می گوییم مولفه “App” را رندر کنیم اما آن را ایجاد نکردیم! همچنین به دلایل تضاد است که نام app.js خود را به main.jsx تغییر دادیم نه به app.jsx.

اکنون در همان سطح main.jsx یک فایل App.jsx با این محتوا ایجاد کنید:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './images/vite.svg'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>assets/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

توجه: لوگوهای React و Vite را در SVG در اینترنت خواهید یافت 😉

همچنین CSS برنامه (فایل assets/app.css) را به صورت زیر تغییر دهید:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

و اکنون، به طور معمول، باید این صفحه در مرورگر شما ظاهر شود: