يتضمن دمج Vite مع Laravel 10 عدة خطوات لتحسين تجربة التطوير الخاصة بك من خلال الاستفادة من إمكانات Vite لإعداد بيئة التطوير السريعة وعملية البناء المحسنة. فيما يلي دليل شامل للبدء:
1. قم بتثبيت لارافيل
أولاً، تأكد من تثبيت Laravel. إذا كنت تبدأ مشروعًا جديدًا، فيمكنك إنشاء مشروع Laravel جديد باستخدام Composer:
composer create-project --prefer-dist laravel/laravel laravel-vite-example
انتقل إلى ملف مشروعك:
cd laravel-vite-example
2. قم بتثبيت فايت
يأتي Laravel 10 مزودًا بدعم Vite خارج الصندوق. ومع ذلك، تحتاج إلى تثبيت حزم Vite الضرورية وتهيئة تكوين Vite الخاص بك. قم بتشغيل الأوامر التالية في دليل المشروع الخاص بك:
npm install
npm install vite laravel-vite-plugin vue --save-dev
يقوم هذا الأمر بتثبيت Vite، والمكون الإضافي Laravel لـ Vite، وVue.js، على افتراض أنك تريد استخدام Vue. يمكنك استبدال Vue بـ React أو إطار عمل آخر إذا لزم الأمر أو تركه فارغًا وحذفه
3. تكوين فايت
قم بإنشاء ملف vite.config.js في جذر مشروعك إذا لم يتم إنشاؤه بالفعل بواسطة عملية التثبيت. أضف التكوين التالي لدمج Vite مع Laravel:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});
يحدد هذا التكوين نقاط الإدخال لملفات CSS وJavaScript ويتضمن البرنامج الإضافي Vue. اضبط جزء المكونات الإضافية وفقًا لمتطلبات مشروعك (على سبيل المثال، استبدل vue() بـ React() لـ React).
4. قم بتحديث قوالب البليد الخاصة بك
في ملف تخطيط Blade الخاص بك (على سبيل المثال، Resources/views/layouts/app.blade.php)، استبدل تحميل الأصول التقليدية بطريقة تحميل أصول Vite:
@vite(['resources/css/app.css', 'resources/js/app.js'])
سيقوم هذا التوجيه تلقائيًا بتحميل الأصول المحددة باستخدام Vite أثناء التطوير والأصول المحسنة في الإنتاج.
إذا لم يكن لديك مجلد تخطيط، فقم بإنشاء واحد لأن إنشاء تخطيط في تطبيق ويب يعد خطوة أساسية لضمان التصميم والبنية المتسقة عبر الصفحات المختلفة. يوفر Laravel، باستخدام محرك القوالب Blade الخاص به، طريقة فعالة للغاية لإدارة التخطيطات. دعونا نتعرف على عملية إنشاء واستخدام التخطيط في Laravel:
mkdir resources/views/layouts
touch resources/views/layouts/app.blade.php
الآن، قم بتحرير Resources/views/layouts/app.blade.php لتحديد تخطيطك الرئيسي. إليك مثال أساسي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Default Title')</title>
@vite(['resources/css/app.css'])
</head>
<body>
<header>
<!-- Your navigation bar here -->
</header>
<main>
@yield('content')
</main>
<footer>
<!-- Your footer content here -->
</footer>
@vite(['resources/js/app.js'])
</body>
</html>
5. اضبط خادم التطوير
لاستخدام خادم تطوير Vite، يمكنك تشغيله عن طريق تشغيل:
npm run dev
يبدأ هذا الأمر خادم Vite، الذي يوفر استبدال الوحدة الساخنة. لا يزال تطبيق Laravel الخاص بك بحاجة إلى الخدمة، لذلك ستقوم بتشغيل:
php artisan serve
6. البناء للإنتاج
عندما تكون جاهزًا لبناء مشروعك للإنتاج، استخدم:
npm run build
يقوم هذا الأمر بإنشاء الأصول المحسنة في الدليل العام الخاص بك. سيستخدم Laravel هذه الأصول المحسنة تلقائيًا في وضع الإنتاج.
تأكد من تكوين كل شيء بشكل صحيح عن طريق الوصول إلى تطبيق Laravel الخاص بك في متصفح الويب. من المفترض أن ترى تطبيق Laravel الخاص بك قيد الخدمة، مع إدارة Vite للأصول.
باتباع هذه الخطوات، يمكنك دمج Vite في مشروع Laravel 10 الخاص بك، والاستفادة من أوقات الإنشاء السريعة وقدرات خادم التطوير. اضبط التكوين حسب الضرورة ليناسب تفاصيل مشروعك، خاصة فيما يتعلق بإطار عمل JavaScript الذي اخترت استخدامه.
ما أهمية Vite ؟
يوفر استخدام Vite مع Laravel العديد من المزايا التي تعمل على تحسين تجربة التطوير وأداء تطبيق الويب الخاص بك. إليكم شرح مبسط:
إعداد سريع لبيئة التطوير: يعمل Vite على تسريع عملية إعداد بيئة التطوير بشكل كبير. ويستخدم وحدات ES الأصلية، والتي تسمح ببدء تشغيل الخادم وتحديثه بسرعة البرق دون الحاجة إلى إعادة تحميل الصفحة. وهذا يجعل عملية التطوير أكثر سلاسة وكفاءة.
استبدال الوحدة الساخنة (HMR): يوفر Vite دعمًا جاهزًا لاستبدال الوحدة الساخنة. وهذا يعني أنه عند إجراء تغييرات على ملفات CSS أو JavaScript، فإن هذه التغييرات تنعكس على الفور في المتصفح دون الحاجة إلى إعادة تحميل الصفحة بالكامل. تعتبر هذه الميزة مفيدة بشكل خاص للحفاظ على حالة التطبيق أثناء التطوير، مما يؤدي إلى تجربة تطوير أكثر سلاسة.
تصميمات الإنتاج المحسنة: يعمل Vite على تحسين تطبيقك للإنتاج بشكل افتراضي، وتجميع الأصول بكفاءة وتقليل الملفات إلى الحد الأدنى عند إنشاء مشروعك. وينتج عن ذلك أوقات تحميل أسرع للمستخدمين، مما يؤدي إلى تحسين الأداء العام وتجربة المستخدم لتطبيق الويب الخاص بك.
التكامل السهل مع أطر عمل الواجهة الأمامية: يدعم Vite أطر عمل الواجهة الأمامية الحديثة مثل Vue.js وReact وSvelte. يسهل هذا التوافق دمج وظائف الواجهة الأمامية المعقدة في تطبيقات Laravel، مما يسمح بتجارب ويب أكثر ديناميكية وتفاعلية.
معالجة مبسطة للأصول: يعمل Vite على تبسيط عملية التعامل مع الأصول (مثل الصور والخطوط)، بما في ذلك ميزات مثل استيراد الأصول باستخدام بناء جملة ESM والدعم المدمج لمعالجات TypeScript وJSX وCSS المسبقة والمزيد. وهذا يقلل من الحاجة إلى تكوينات ومكونات إضافية إضافية، مما يؤدي إلى تبسيط عملية التطوير.
تجربة مطور محسنة: يعمل الجمع بين عمليات التحديث السريعة وHMR وعمليات البناء الفعالة على تحسين تجربة المطور بشكل كبير. يمكن للمطورين رؤية تغييراتهم في الوقت الفعلي، وتصحيح الأخطاء بشكل أكثر فعالية، وقضاء وقت أقل في انتظار الإصدارات أو عمليات إعادة التحميل.
ميزات جافا سكربت الحديثة : يتيح فايت للمطورين استخدام ميزات جافا سكربت الحديثة دون القلق بشأن توافق المتصفح. فهو يقوم تلقائيًا بنقل التعليمات البرمجية الخاصة بك وملءها بشكل متعدد بناءً على المستعرضات المستهدفة لديك، مما يضمن عمل تطبيقك عبر بيئات مختلفة.
باختصار، يؤدي دمج Vite مع Laravel إلى تبسيط سير عمل التطوير، وتحسين أداء التطبيق، وتعزيز تجربة المطور والمستخدم بشكل عام.