استفاده از Vite در Laravel

استفاده از Vite در Laravel: یک راهنمای جامع

استفاده از Vite در Laravel: یک راهنمای جامع

Laravel، فریم‌ورک محبوب PHP، به طور سنتی از Mix به عنوان ابزار build برای مدیریت دارایی‌های فرانت‌اند (مانند JavaScript، CSS و تصاویر) استفاده می‌کرد. با این حال، با ظهور ابزارهای مدرن‌تر و سریع‌تر، نیاز به جایگزینی Mix احساس می‌شد. Vite، یک ابزار build سریع و سبک، به عنوان یک جایگزین عالی برای Mix در Laravel مطرح شده است. این مقاله به بررسی جامع استفاده از Vite در Laravel، مزایا، مراحل نصب و پیکربندی، و نحوه استفاده از آن در پروژه‌های واقعی می‌پردازد.

چرا Vite؟

Vite در مقایسه با Mix، مزایای متعددی دارد که آن را به انتخاب مناسب‌تری برای پروژه‌های Laravel تبدیل می‌کند:

  • سرعت: Vite از ES Modules به صورت native در مرورگر استفاده می‌کند، که منجر به زمان‌های build و refresh بسیار سریع‌تر می‌شود.
  • Hot Module Replacement (HMR): HMR به شما امکان می‌دهد تغییرات کد را بدون نیاز به refresh کامل صفحه مشاهده کنید، که به طور قابل توجهی سرعت توسعه را افزایش می‌دهد.
  • پشتیبانی از TypeScript، JSX، CSS Modules و غیره: Vite به طور native از طیف گسترده‌ای از فناوری‌های مدرن فرانت‌اند پشتیبانی می‌کند.
  • پیکربندی ساده: Vite به طور کلی پیکربندی ساده‌تری نسبت به Mix دارد.
  • اکوسیستم فعال: Vite دارای یک اکوسیستم فعال و در حال رشد از پلاگین‌ها و ابزارها است.

پیش‌نیازها

قبل از شروع، اطمینان حاصل کنید که پیش‌نیازهای زیر را دارید:

  • PHP 8.0 یا بالاتر
  • Laravel 9 یا بالاتر (توصیه می‌شود)
  • Node.js (نسخه 14 یا بالاتر)
  • npm یا Yarn

نصب Vite در Laravel

نصب Vite در Laravel یک فرآیند ساده است. مراحل زیر را دنبال کنید:

  1. حذف Mix: اگر از قبل از Laravel Mix استفاده می‌کنید، ابتدا آن را حذف کنید. این کار را می‌توان با اجرای دستور زیر انجام داد:

    php artisan ui:purge
  2. نصب Vite: Vite را با استفاده از npm یا Yarn نصب کنید:

    npm install -D vite

    یا

    yarn add -D vite
  3. پیکربندی Vite: یک فایل vite.config.js در ریشه پروژه خود ایجاد کنید. این فایل برای پیکربندی Vite استفاده می‌شود. یک مثال ساده از این فایل به شرح زیر است:


    export default {
    root: './resources',
    publicDir: './',
    build: {
    outDir: '../public/build',
    emptyOutDir: true,
    },
    };
  4. نصب پلاگین‌های Vite: پلاگین‌های Vite را برای پشتیبانی از Laravel نصب کنید:

    npm install -D @vitejs/plugin-vue (اگر از Vue.js استفاده می‌کنید)

    npm install -D @vitejs/plugin-react (اگر از React استفاده می‌کنید)

    npm install -D vite-plugin-laravel (برای ادغام بهتر با Laravel)
  5. پیکربندی Laravel: فایل webpack.mix.js را حذف کنید. سپس، فایل resources/sass/app.scss را به صورت زیر تغییر دهید:

    @import '~bootstrap/scss/bootstrap';
  6. افزودن اسکریپت‌ها و استایل‌ها به Blade: در فایل‌های Blade خود، اسکریپت‌ها و استایل‌های Vite را به صورت زیر اضافه کنید:

    @vite('resources/js/app.js')

    @vite('resources/sass/app.scss')

استفاده از Vite در پروژه‌های واقعی

اکنون که Vite را در Laravel نصب و پیکربندی کردید، می‌توانید از آن برای مدیریت دارایی‌های فرانت‌اند خود استفاده کنید. در اینجا چند مثال از نحوه استفاده از Vite در پروژه‌های واقعی آورده شده است:

JavaScript

برای استفاده از JavaScript با Vite، یک فایل app.js در دایرکتوری resources/js ایجاد کنید. این فایل نقطه ورود برای کد JavaScript شما خواهد بود.

مثال:


import './bootstrap';
import { createApp } from 'vue';
import App from './components/App.vue';

const app = createApp(App);
app.mount('#app');

CSS/SCSS

برای استفاده از CSS یا SCSS با Vite، یک فایل app.scss در دایرکتوری resources/sass ایجاد کنید. این فایل نقطه ورود برای کد CSS/SCSS شما خواهد بود.

مثال:


@import '~bootstrap/scss/bootstrap';
// کد CSS/SCSS سفارشی شما

تصاویر

Vite به طور native از import تصاویر پشتیبانی می‌کند. می‌توانید تصاویر را در کد JavaScript یا CSS خود import کنید.

مثال:


import logo from './logo.png';
// استفاده از logo در کد

دستورات Vite

Vite دستورات مختلفی را برای توسعه و build دارایی‌های فرانت‌اند ارائه می‌دهد. در اینجا چند دستور مهم آورده شده است:

  • npm run dev یا yarn dev: این دستور سرور توسعه Vite را راه‌اندازی می‌کند. این سرور به طور خودکار تغییرات کد را تشخیص می‌دهد و صفحه را refresh می‌کند.
  • npm run build یا yarn build: این دستور دارایی‌های فرانت‌اند را برای production build می‌کند. دارایی‌های build شده در دایرکتوری public/build قرار می‌گیرند.

نکات و ترفندها

در اینجا چند نکته و ترفند برای استفاده موثر از Vite در Laravel آورده شده است:

  • استفاده از Hot Module Replacement (HMR): HMR به شما امکان می‌دهد تغییرات کد را بدون نیاز به refresh کامل صفحه مشاهده کنید. این کار به طور قابل توجهی سرعت توسعه را افزایش می‌دهد.
  • بهینه‌سازی تصاویر: برای بهبود عملکرد وب‌سایت خود، تصاویر را قبل از استفاده در پروژه خود بهینه‌سازی کنید.
  • استفاده از Cache Busting: برای اطمینان از اینکه کاربران همیشه آخرین نسخه دارایی‌های فرانت‌اند را دریافت می‌کنند، از Cache Busting استفاده کنید. Vite به طور خودکار Cache Busting را برای شما انجام می‌دهد.
  • استفاده از پلاگین‌ها: Vite دارای یک اکوسیستم فعال از پلاگین‌ها است که می‌توانید از آنها برای افزودن قابلیت‌های جدید به Vite استفاده کنید.

نتیجه‌گیری

Vite یک ابزار build قدرتمند و سریع است که می‌تواند به طور قابل توجهی سرعت توسعه و عملکرد پروژه‌های Laravel شما را بهبود بخشد. با دنبال کردن مراحل نصب و پیکربندی ارائه شده در این مقاله، می‌توانید به راحتی Vite را در پروژه‌های خود ادغام کنید و از مزایای آن بهره‌مند شوید. با توجه به سرعت، HMR و پشتیبانی از فناوری‌های مدرن، Vite به عنوان یک جایگزین عالی برای Laravel Mix در پروژه‌های جدید و موجود مطرح شده است.

فریم‌ورک‌ها و ابزارهای توسعه

فیسبوکXپینترستواتس اپایمیل

مطالب مرتبط ...