كيفية استخدام Vite في Laravel بشكل صحيح؟

Khessam Ahmed · 28 مايو 2023

السلام عليكم ورحمة الله والصلاة على رسول الله

بعدما تم دعم vite في laravel لدي استفسار حول كيفية عمله او طريقة استخدامه الصحيحة خاصة مع laravel وشكرا

تم التعديل في 28 مايو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 28 مايو 2023

أولاً أنصحك بقراءة النقاش التالي لفهم المميزات التي أتي بها Vite.

وتم دعم Vite في Laravel 9.19 والإصدارات اللاحقة، وVite هي محزم تجميع سريع وخفيف الوزن يستخدم في تطوير تطبيقات الويب، ويعتبر Vite أداة تجميع قائمة على تجميع الوحدات (build on-demand)، مما يعني أنه يجمع فقط الوحدات التي يتم تحميلها فعليًا في صفحة الويب.

وقد شرحت كيف يمكنك استخدام Vite في مشروع لارافيل في النقاش التالي، حيث أن في الإصدرات الحديثة لست بحاجة إلى تثبيت Vite، وقدر شرحت أيضًا طريقة التثبيت.

Adnane Kadri · 28 مايو 2023

تثبيته:

vite يأتي معدا مسبقا كحزمة مرفقة بملف اعداد في تطبيقات لارافيل ولن تحتاج أي اعداد له، وللبدء في استعماله بشكل مباشر قم فقط بتنفيذ الأمر npm run dev لمباشرة استعمال خادمه وطبعا يكون هذا بعد تثبيت اعتماديات node، أما من حيث أفضليته على ويب باك وطريقة عمله يمكنك الاطلاع على الإجابة التالية:

تكوينه وإعداده:

يعد ملف vite.config.js في جذر مشروعك ملف اعداد vite الرئيسي، ويأتي باعدادات مسبقة. مثلما أنك حر في تخصيص هذا الملف بناءً على احتياجاتك ، كتثبيت أي مكونات إضافية أخرى يتطلبها تطبيقك ، مثل @ vitejs / plugin-vue أو @ vitejs / plugin-reaction أو غيرهما.

استعماله في ملفات العروض blade:

تأتي النسخ المتأخرة من لارافيل متوفرة على موجه القالب vite@ لحقن ملفات الاصول التي يقوم بتحزيمها في ملفات العروض، ولذلك سيمكن استعماله بوساطته كـ:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

اذ سيكتشف التوجيهvite تلقائيًا خادم تطوير Vite ويحقن عميل Vite لتمكين استبدال الوحدة النمطية المناسبة. وهذا لأنه يستعمل ما يعرف بـ vite manifest أو بيان vite وهو ملف json يتم توليده للإشارة إلى ملفات جافاسكربت وCSS وما يوافقها مما تم تحزيمه وتجميعه.

تشغيله:

# تشغيل خادم تطوير فايت
npm run dev
 
# تجميع وبناء ملفات الاصول لبيئة انتاجية
npm run build

هذا ما تحتاج معرفته بشكل أولي للتعامل مع vite في تطبيقات لارافيل، قد تحتاج لاحقا بعض الأمور المتقدمة قليلا كالتعرف على واجهته البرمجية أو ما الى ذلك للتعامل مع بعض المشاكل أو التخصيصات، مثل استعمال تطبيقات SPA أو Inertia أو غيرهما ..

عبدالباسط ابراهيم · 28 مايو 2023

قبل التحويل إلى Vite يجب أن تعرف أن Vite يركز على توفير تجربة أسرع وأكثر إنتاجية عند بناء تطبيقات JavaScript غنية. إذا كنت تطور تطبيقًا من نوع صفحة واحدة (SPA)، بما في ذلك تلك المطورة باستخدام أدوات مثل Inertia ، فإن Vite سيكون الخيار الأمثل.

يعمل Vite بشكل جيد أيضًا مع تطبيقات تقليدية تم تجميعها من جانب الخادم مع JavaScript ، بما في ذلك تلك التي تستخدم Livewire. ومع ذلك ، فإنه يفتقد بعض الميزات التي يدعمها Laravel Mix ، مثل القدرة على نسخ الأصول العشوائية إلى البناء التي لا ترتبط مباشرة في تطبيق JavaScript الخاص بك.

وبالإضافة للمصادر السابقة يفضل الإطلاع على المصادر التالية

Khessam Ahmed · 28 مايو 2023

بتاريخ 5 ساعة قال Adnane Kadri:
تثبيته:

vite يأتي معدا مسبقا كحزمة مرفقة بملف اعداد في تطبيقات لارافيل ولن تحتاج أي اعداد له، وللبدء في استعماله بشكل مباشر قم فقط بتنفيذ الأمر npm run dev لمباشرة استعمال خادمه وطبعا يكون هذا بعد تثبيت اعتماديات node، أما من حيث أفضليته على ويب باك وطريقة عمله يمكنك الاطلاع على الإجابة التالية:

تكوينه وإعداده:

يعد ملف vite.config.js في جذر مشروعك ملف اعداد vite الرئيسي، ويأتي باعدادات مسبقة. مثلما أنك حر في تخصيص هذا الملف بناءً على احتياجاتك ، كتثبيت أي مكونات إضافية أخرى يتطلبها تطبيقك ، مثل @ vitejs / plugin-vue أو @ vitejs / plugin-reaction أو غيرهما.

استعماله في ملفات العروض blade:

تأتي النسخ المتأخرة من لارافيل متوفرة على موجه القالب vite@ لحقن ملفات الاصول التي يقوم بتحزيمها في ملفات العروض، ولذلك سيمكن استعماله بوساطته كـ:
<!doctype html>
<head>
    {{-- ... --}}
 
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
اذ سيكتشف التوجيهvite تلقائيًا خادم تطوير Vite ويحقن عميل Vite لتمكين استبدال الوحدة النمطية المناسبة. وهذا لأنه يستعمل ما يعرف بـ vite manifest أو بيان vite وهو ملف json يتم توليده للإشارة إلى ملفات جافاسكربت وCSS وما يوافقها مما تم تحزيمه وتجميعه.

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

نعم انا سبق وان استخدمت vite مع tailwind وكان الامر بسيط الموقع الخاص بهم يشرح كيفية استعمالها لكن حاولت انا اقوم بنفس الامر مع مكتبة من مكتبات الجافاسكربت (animejs) رغم اني قمت بتحميلها لكن لم اعرف كيفية استخدامها وجلبها في صفحات blade

مع العلم انني استخدم اخر اصدار من لارفل

Zaiter Ibrahim · 10 ديسمبر 2023

عند تشغيل npm run dev مع كل المحاولات دائما يخبرني ان vite غير معروف رغم اننى اتبعت كل خطوات على الانترنت مثل npm install وغيرها بارك الله فيكم

كيفية استخدام Vite في Laravel بشكل صحيح؟

السؤال

Khessam Ahmed

5 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman