التعامل مع الأصول (Assets) وأداة Vite

في السابق، كان مبرمجو Laravel يعتمدون على Laravel Mix لمعالجة ملفات الواجهة الأمامية، ولكن مع Laravel 11 أصبح Vite هو الخيار الافتراضي والوحيد تقريبًا. Vite هي أداة بناء (Build Tool) فائقة السرعة توفر تجربة تطوير مذهلة بفضل ميزة التحديث الفوري (Hot Module Replacement) التي تجعل التعديلات تظهر في المتصفح في أجزاء من الثانية دون الحاجة لتحديث الصفحة يدوياً.

1. البدء مع Vite

بمجرد تثبيت مشروع Laravel جديد، ستجد ملفاً يسمى vite.config.js في جذر المشروع. هذا الملف هو المسؤول عن تعريف المسارات البرمجية التي يجب على Vite مراقبتها وتجميعها.

ملاحظة: لتشغيل Vite أثناء التطوير، يجب أن يكون لديك Node.js مثبتاً على جهازك، ثم تقوم بتشغيل الأمر التالي في سطر الأوامر:
npm install && npm run dev

2. ربط الملفات في قوالب Blade

لاستدعاء ملفات الـ CSS والـ JS داخل ملفات Blade، نستخدم الـ Directive الخاص بـ @vite. سيتكفل لارافيل بتحديد الرابط الصحيح سواء كنت في مرحلة التطوير أو الإنتاج:

resources/views/layouts/app.blade.php

    @vite(['resources/css/app.css', 'resources/js/app.js'])

3. التجهيز للنشر الفعلي (Production)

عند الانتهاء من تطوير موقعك والرغبة في رفعه على الاستضافة، لا يمكن تشغيل npm run dev. بدلاً من ذلك، يجب عليك بناء نسخ مصغرة ومشفرة من الملفات لضمان أفضل أداء وسرعة تحميل:

npm run build

سيقوم Vite بإنشاء نسخة نهائية من الملفات داخل مجلد public/build، وسيقوم لارافيل تلقائياً باستدعائها عند استخدام @vite.

أسئلة شائعة حول Vite

تأكد من أنك قمت بتشغيل أمر npm run dev وأنه لا يزال يعمل في الخلفية. إذا تم إغلاق البرنامج، سيتوقف التحديث الفوري وستفقد الروابط مسارها الصحيح.

نعم، Vite يتكامل بشكل مثالي مع Tailwind CSS و Bootstrap و Sass. كل ما عليك فعله هو تثبيت المكتبة وإضافتها إلى ملف الإعداد الخاص بـ Vite.
المرحلة القادمة

التعامل مع قواعد البيانات والمهاجر

انتهينا من الجزء المرئي من التطبيق، حان الوقت لندخل إلى "المخزن" (قاعدة البيانات). سنبدأ بتعلم الـ Migrations وكيفية تصميم جداولك برمجياً.

تعلم المهاجر (Migrations)
المحرر الذكي

اكتب الكود وشاهد النتيجة فوراً

جرب الآن مجاناً
قناة ديف عربي

تابع أحدث الدروس والتحديثات مباشرة على واتساب

انضم الآن