Vite هي أداة بناء واجهة أمامية حديثة توفر بيئة تطوير سريعة للغاية وتجمع الكود الخاص بك للإنتاج. عند بناء تطبيقات باستخدام Laravel، يُستخدم Vite عادةً لتجميع ملفات CSS وJavaScript الخاصة بتطبيقك إلى أصول جاهزة للإنتاج. يتكامل Laravel بسلاسة مع Vite من خلال توفير إضافة رسمية وتوجيه Blade لتحميل أصولك للتطوير والإنتاج.

التثبيت والإعداد

للبدء مع Vite في تثبيت Laravel جديد، تأكد من تثبيت Node.js (16+) وNPM:

node -v
npm -v

يمكنك تثبيت Node وNPM من موقع Node الرسمي. بدلاً من ذلك، إذا كنت تستخدم Laravel Sail، يمكنك استدعاء Node وNPM من خلال Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

بعد ذلك، ثبت Vite وإضافة Laravel. يتضمن ملف package.json الافتراضي في تثبيت Laravel جديد كل ما تحتاجه للبدء مع Vite. ثبت تبعيات الواجهة الأمامية لتطبيقك عبر NPM:

npm install

تكوين Vite

يتم تكوين Vite عبر ملف vite.config.js في جذر مشروعك. خصص هذا الملف بناءً على احتياجاتك. تتطلب إضافة Laravel Vite تحديد نقاط الدخول لتطبيقك:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
  plugins: [
    laravel([
      'resources/css/app.css',
      'resources/js/app.js',
    ]),
  ],
});

تحميل السكريبتات والأنماط

أضف توجيه @vite في قالب Blade الخاص بك لتحميل الأصول:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيقي</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <!-- المحتوى -->
    </div>
</body>
</html>

تشغيل Vite

لتشغيل خادم تطوير Vite:

npm run dev

لبناء الأصول للإنتاج:

npm run build

العمل مع Vue أو React

يدعم Laravel وVite كلاً من Vue وReact. لإعداد Vue:

npm install vue @vitejs/plugin-vue

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
  plugins: [
    laravel(['resources/js/app.js']),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

تعرف على المزيد حول تجميع الأصول في Laravel من التوثيق الرسمي.

الخاتمة

يوفر Vite طريقة سريعة وفعالة لإدارة أصول الواجهة الأمامية في Laravel 11. مع التحميل السريع للوحدات والبناء المحسن للإنتاج، يعزز Vite تجربة التطوير بشكل كبير.

برمجة سعيدة مع Laravel 11!

10 أساسيات Laravel 11: تجميع الأصول

التثبيت والإعداد

تكوين Vite

تحميل السكريبتات والأنماط

تشغيل Vite

العمل مع Vue أو React

الخاتمة

ناقش مشروعك معنا

مقالات ذات صلة

البدء مع Laravel 11: التثبيت والتكوين وهيكل المجلدات

9 أساسيات Laravel 11: قوالب Blade

11 أساسيات Laravel 11: معالجة الأخطاء