انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 15
دورة إطار العمل Laravel

تجميع وربط ملفات الأصول عبر أداة Vite في LaravelLaravel Asset Bundling with Vite Directive

إعداد أداة Vite الحديثة في Laravel وتضمين ملفات التنسيق والبرمجة عبر توجيه @vite والوصول للملفات الثابتة بدالة asset.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

Frontend Asset Structure in Laravel هيكلة ملفات الأصول في Laravel

يفصل إطار Laravel بين ملفات الواجهة المصدرية الخام والملفات الثابتة المتاحة مباشرة للمتصفح عبر مجلدين مستقلين. توضع ملفات التنسيق والبرمجة المصدرية داخل resources/css وresources/js، بينما تستقر الحزم المترجمة والصور الثابتة داخل مجلد public.

  • الملفات المصدرية (resources/): تضم ملفات CSS وJavaScript الخام قبل معالجتها وضغطها.
  • المجلد العام (public/): المجلد الوحيد المتاح للوصول المباشر من المتصفح عبر روابط الويب.
  • مخرجات البناء (public/build/): تحفظ فيه أداة Vite الحزم المضغوطة وملف البيان بعد عملية البناء.
مخطط معماري يوضح تجميع وربط ملفات الأصول عبر أداة Vite في Laravel في إطار العمل Laravel 12
PHP 
# Source entry points (uncompiled):
resources/css/app.css
resources/js/app.js

# Publicly served output (compiled by Vite):
public/build/manifest.json
public/build/assets/app-C9x2kL.css

Configuring Vite Plugin for Laravel إعداد ملف تكوين أداة Vite

يأتي كل مشروع Laravel جديد مزوداً بملف الإعداد vite.config.js في الجذر مربوطاً بالإضافة الرسمية laravel-vite-plugin. تحدد مصفوفة input داخل هذا الملف نقاط الدخول لملفات التنسيق والسكربتات التي ستقوم Vite بمراقبتها وتجميعها.

  • الإضافة الرسمية (laravel-vite-plugin): تربط أداة التجميع Vite بمحرك قوالب Blade بسلاسة.
  • مصفوفة نقاط الدخول (input Array): تحدد الملفات الرئيسية التي يبدأ منها تجميع الأصول.
  • التحديث التلقائي (refresh: true): يعيد تحديث صفحة المتصفح لحظياً بمجرد تعديل أي ملف قالب Blade.
PHP 
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [laravel(['resources/js/app.js'])],
});

Loading Bundles with Vite Directive تضمين الحزم عبر توجيه Vite

لتضمين ملفات التنسيق والبرمجة داخل قالب العرض، نضع توجيه @vite داخل وسم الرأس في صفحة HTML. يكتشف Laravel تلقائياً ما إذا كان خادم التطوير يعمل لبث التحديثات الفورية أو يقرأ الملفات المضغوطة من ملف البيان في الإنتاج.

  • تضمين ملف أو عدة ملفات (Entry Array): يقبل التوجيه مسار ملف واحد أو مصفوفة مسارات مطابقة لملف الإعداد.
  • توليد الوسوم تلقائياً (Auto HTML Tags): ينشئ وسوم link وscript القياسية مع سمة module الحديثة.
  • ربط البصمة التلقائي (Auto Hash Mapping): يغنيك عن تعديل أسماء الملفات المؤرشفة يدوياً بعد كل عملية بناء.
PHP 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CloseTag Portal</title>
    @vite(['resources/css/app.css'])
    @vite(['resources/js/app.js'])
</head>
</html>

Vite Development and Production Builds تشغيل خادم التطوير وبناء الإنتاج

أثناء التطوير المحلي، يشغل الأمر npm run dev خادم الاستبدال اللحظي للوحدات لتظهر تعديلات التنسيق فوراً في المتصفح دون إعادة تحميل الصفحة. وقبل النشر للإنتاج، يضغط الأمر npm run build الملفات ويضيف بصمة فريدة لأسمائها لتسريع التخزين المؤقت.

  • التحديث اللحظي (npm run dev): يطبق تعديلات التنسيق والبرمجة في المتصفح فوراً أثناء كتابة الكود.
  • بناء حزم الإنتاج (npm run build): يضغط الأكواد ويحذف الأجزاء غير المستخدمة ويولد ملفات ببصمة فريدة.
  • ملف البيان المرجعي (manifest.json): يربط المسار المصدري الأصلي باسم الملف المضغوط النهائي.
PHP 
# 1. Install frontend dependencies once
npm install

# 2. Start HMR server during local development
npm run dev

# 3. Compile & minify versioned assets for production
npm run build

Linking Static Public Folder Assets ربط الملفات الثابتة بدالة asset

للوصول إلى الملفات الثابتة الموضوعة مباشرة داخل مجلد public مثل أيقونة الموقع أو الشعارات الثابتة، نستخدم الدالة المساعدة asset لتوليد رابط كامل. أما إذا أردت ضغط الصور الموجودة داخل resources/images وإضافة بصمة لها، فاستخدم دالة Vite::asset.

  • دالة الملفات العامة (asset Helper): تولد رابطاً كاملاً يشير مباشرة إلى الملف داخل مجلد public.
  • الصور المجمعة ببصمة (Vite::asset): تعالج الصور الموجودة في resources وتنسخها ببصمة فريدة للإنتاج.
  • دعم شبكات التوزيع (ASSET_URL): تحترم دالة asset متغير بيئة CDN تلقائياً عند توليد الروابط.
PHP 
<header>
    <img src="<?php echo asset('logo.png'); ?>">
    <img src="<?php echo Vite::asset(
        'resources/images/banner.webp'
    ); ?>" alt="Banner">
</header>

Vite and Asset Helpers Reference مرجع أوامر ودوال ربط الأصول

يضمن التمييز الدقيق بين توجيه @vite ودالة asset تحقيق أعلى سرعة تحميل للواجهة ومنع انكسار روابط الملفات في الإنتاج. راجع الملخص المرجعي التالي لتوحيد طريقة استدعاء الأصول في جميع قوالب مشروعك.

وجه المقارنة الهندسيالأسلوب اليدوي أو غير المحميمعيار Laravel 12 الحديث
تحديث الكاش للمتصفحإضافة رقم إصدار يدوي مثل ?v=2 في نهاية رابط الملفتوليد بصمة فريدة تلقائياً لاسم الملف عبر @vite وأمر البناء
معاينة التعديلاتإعادة تحميل صفحة المتصفح يدوياً بعد كل تعديل في التنسيقاستبدال لحظي فوري للوحدات عبر خادم التطوير npm run dev
تجميع المكتباتتضمين عشرات ملفات السكربت المنفصلة غير المضغوطة في الصفحةدمج وضغط جميع الاعتماديات في حزمة واحدة سريعة التحميل
روابط الصور الثابتةكتابة مسارات نسبية تنكسر عند الانتقال لصفحات فرعيةتوليد روابط مطلقة مضمونة دائماً باستخدام الدالة asset
PHP 
<head>
    <link rel="icon" href="<?php echo asset('ico'); ?>">
    @vite(['resources/css/app.css'])
    @vite(['resources/js/app.js'])
</head>
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس حول «تجميع وربط ملفات الأصول عبر أداة Vite في Laravel» مفاهيم هيكلة ملفات الأصول في Laravel، وإعداد ملف تكوين أداة Vite، وتضمين الحزم عبر توجيه Vite وفق معايير Laravel 12 الحديثة.

الخطوة التالية والدرس القادم

انتقل الآن إلى الدرس التالي «قواعد محرك القوالب Blade والطباعة الآمنة ضد XSS» للبناء التراكمي على ما تعلمته.

المهام التدريبية اختبر فهمك الآن الدرس التالي: قواعد محرك القوالب Blade والطباعة الآمنة ضد XSS

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Vite Assets ربط الأصول
إعداد أداة Vite الحديثة في Laravel وتضمين ملفات التنسيق والبرمجة عبر توجيه @vite والوصول للملفات الثابتة بدالة asset.
للمراجعة
02 Frontend Asset Structure in Laravel هيكلة ملفات الأصول في Laravel
المفهوم الهندسي والتطبيق العملي المباشر لقسم هيكلة ملفات الأصول في Laravel في إطار العمل Laravel 12.
للمراجعة
03 Configuring Vite Plugin for Laravel إعداد ملف تكوين أداة Vite
المفهوم الهندسي والتطبيق العملي المباشر لقسم إعداد ملف تكوين أداة Vite في إطار العمل Laravel 12.
للمراجعة
04 Loading Bundles with Vite Directive تضمين الحزم عبر توجيه Vite
المفهوم الهندسي والتطبيق العملي المباشر لقسم تضمين الحزم عبر توجيه Vite في إطار العمل Laravel 12.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 MVC MVC
Model View Controller
النمط المعماري الذي يفصل بين نماذج البيانات Models، وطبقات العرض Views، والمتحكمات Controllers في Laravel.
للمراجعة
02 CLI CLI
Command Line Interface
واجهة سطر الأوامر التي تعمل عبر أداة php artisan لتوليد الملفات وإدارة التطبيق.
للمراجعة
03 HTTP HTTP
Hypertext Transfer Protocol
بروتوكول نقل النص الفائق الذي ينظم طلبات المتصفح واستجابات خادم Laravel.
للمراجعة
04 PSR PSR
PHP Standards Recommendations
المعايير القياسية للغة PHP مثل التحميل التلقائي PSR-4 التي يلتزم بها إطار العمل Laravel.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. اكتب ونفّذ المثال البرمجي المشروح في قسم «هيكلة ملفات الأصول في Laravel» داخل مشروع Laravel 12 المحلي وتحقق من النتيجة.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. بدّل بين الحالات الثلاث في المحاكي التفاعلي ضمن قسم «إعداد ملف تكوين أداة Vite» وقارن مخرجات التنفيذ.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما الهدف الهندسي الأساسي من هيكلة ملفات الأصول في Laravel في إطار العمل Laravel 12؟

يسهم هيكلة ملفات الأصول في Laravel في تنظيم منطق التطبيق بأسلوب معياري آمن وقابل للصيانة في Laravel 12.

02

يساعد الالتزام باصطلاحات Laravel 12 الرسمية في قسم «إعداد ملف تكوين أداة Vite» على رفع جودة الكود وسهولة اختباره آلياً.

صواب؛ الالتزام بالمعايير القياسية في Laravel 12 يجعل الكود واضحاً وسهل الفحص والصيانة.

03

أي آلية في Laravel 12 تتولى إدارة تضمين الحزم عبر توجيه Vite بشكل مباشر ومنظم؟

توفر طبقة إطار العمل وحاوية الخدمات في Laravel 12 الأدوات القياسية لإدارة تضمين الحزم عبر توجيه Vite.

04

لماذا يُعد تطبيق تشغيل خادم التطوير وبناء الإنتاج مهماً عند بناء تطبيقات Laravel 12 جاهزة للإنتاج؟

لأنه يمنع الأخطاء البرمجية الخفية ويوحد سلوك التطبيق بين بيئتي التطوير والإنتاج.

05

في Laravel 12، يُنصح بكتابة مفاتيح الإنتاج السرية مباشرة داخل ملفات الكود المصدري المرفوعة إلى Git بدلاً من ملفات البيئة.

خطأ؛ يجب حفظ المفاتيح والبيانات السرية في متغيرات البيئة وعدم رفعها أبداً إلى مستودع Git.

06

ما المزايا الهندسية التي يحققها تطبيق ربط الملفات الثابتة بدالة asset في Laravel 12؟ (اختر كل ما ينطبق)

يوفر فصلاً واضحاً للمسؤوليات، وأماناً أعلى أثناء التنفيذ، وتعاوناً أسهل بين أفراد الفريق.

07

يوظف إطار العمل Laravel 12 ميزات PHP 8 الحديثة مثل تحديد أنواع القيم المرجعة لجعل الكود أكثر وضوحاً وأماناً.

صواب؛ يعتمد Laravel 12 بشكل كامل على الصياغة الحديثة للغة PHP 8.2+ وسلامة الأنواع.

08

ما الفرق الجوهري بين معيار Laravel 12 الحديث والملفات اليدوية التقليدية في مرجع أوامر ودوال ربط الأصول؟

يوفر Laravel 12 واجهات قياسية موحدة وحماية مدمجة تغني عن الكود اليدوي المعرض للأخطاء.