كيفية تضمين JavaScript في Laravel 11: دليل خطوة بخطوة لجميع السيناريوهات

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

1. تضمين JavaScript في جميع الملفات

في العديد من الحالات، قد ترغب في تضمين JavaScript عالميًا عبر تطبيق Laravel الخاص بك. فيما يلي كيفية تنظيم جافا سكريبت وتجميعها لتضمينها عالميًا.

الخطوة 1: ضع ملف جافا سكريبت الخاص بك

1. الموقع: قم بتخزين ملفات JavaScript في دليل Resources/js. على سبيل المثال، إذا كان اسم ملفك custom.js، فاحفظه باسم Resources/js/custom.js.
2. تنظيم: بالنسبة للمشاريع المعقدة التي تحتوي على ملفات JavaScript متعددة، يمكنك تنظيمها ضمن أدلة فرعية في Resources/js، مثل Resources/js/modules/custom.js.

الخطوة 2: ترجمة JavaScript باستخدام Vite

يستخدم Laravel 11 Vite لإدارة الأصول. لتكوينه لتجميع جافا سكريبت الخاص بك:

1. تضمين في app.js: افتح Resources/js/app.js واستورد ملفك المخصص:

   import './custom.js';

1. استيراد مباشر في طرق العرض: بدلاً من ذلك، إذا كنت تريد JavaScript في طرق عرض معينة فقط، فيمكنك استخدام توجيه @vite في قالب Blade:

   @vite('resources/js/custom.js')

الخطوة 3: تكوين vite.config.js

تأكد من ضبط vite.config.js للتعامل مع عمليات استيراد @vite بشكل صحيح. بشكل افتراضي، يجب أن يبدو الأمر كما يلي:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

الخطوة 4: تشغيل فايت

لتجميع الأصول الخاصة بك مع Vite:

• للتطوير: قم بتشغيل npm run dev
• للإنتاج: قم بتشغيل npm run build

الخطوة 5: قم بتحميل JavaScript في قوالب Blade

لتضمين ملفات JavaScript في القوالب الخاصة بك، استخدم توجيه @vite:

    
    @vite('resources/js/app.js')


    

ملخص

• تخزين ملفات جافا سكريبت في الموارد/js.
• قم بالاستيراد في app.js لتضمينه عالميًا أو قم بتضمينه مباشرةً في قوالب Blade حسب الحاجة.
• تجميع الأصول باستخدام Vite.
• استخدم @vite في قوالب Blade لتحميل JavaScript.

بفضل هذا الإعداد، ستكون JavaScript متاحة على مستوى الموقع في مشروع Laravel 11.

2. فهم ترتيب عرض الشفرة

عند تضمين JavaScript بشكل مشروط في طرق عرض محددة، فمن الضروري فهم الترتيب الذي يتم به عرض قوالب Blade.

في Laravel، تتم معالجة التخطيطات أولاً، تليها طرق العرض الفردية والجزئية. إليك عملية العرض:

1. يتم عرض التخطيط أولاً، مع إنشاء العناصر النائبة (@yield و@section) لحقن المحتوى.
2. تتم معالجة طرق العرض التابعة أو الأجزاء الجزئية بعد ذلك، مع إدراج محتواها في العناصر النائبة للتخطيط.

بسبب هذا الترتيب، إذا كنت تريد إضافة ملفات JavaScript بشكل مشروط في التخطيط بناءً على محتوى العرض الفرعي، فلن تعمل عمليات التحقق من المتغيرات القياسية. ستحتاج إلى استخدام توجيهات Blade @stack و@push للتعامل بشكل أكثر مرونة مع JavaScript الخاصة بالصفحة.

3. تضمين JavaScript بشكل مشروط في طرق عرض محددة باستخدام Stack وPush

لإضافة JavaScript إلى طرق عرض محددة، توفر توجيهات Laravel @stack و@push حلاً فعالاً، مما يسمح لك بتضمين البرامج النصية بشكل مشروط في التخطيط.

الخطوة 1: تحديد المكدس في تخطيطك

في التخطيط الخاص بك، قم بإنشاء مكدس للنصوص البرمجية الخاصة بالصفحة:

    
    @vite('resources/js/app.js')
    @stack('scripts') 


    @yield('content')

الخطوة 2: دفع البرامج النصية من طرق عرض الطفل

في ملف Blade المحدد الذي يحتاج إلى JavaScript، ادفع إلى مكدس البرامج النصية:

@extends('layout')

@section('content')
    
@endsection

@push('scripts')
    @vite('resources/js/custom.js')
@endpush

بفضل هذا الإعداد، لن يتم تضمين custom.js إلا عند تحميل هذا العرض المحدد. توفر هذه الطريقة حلاً نظيفًا يعمل مع ترتيب العرض الخاص بـ Laravel، مما يضمن تضمين ملفات JavaScript بشكل مشروط حسب الحاجة.

أين تعلن @push؟

إن وضع عبارات @push في عرض Blade مهم بشكل أساسي لسهولة القراءة وترتيب التنفيذ. إليك كيفية استخدام @push بفعالية:

1. الموضع في العرض: بينما يمكنك وضع @push في أي مكان في عرض Blade، فمن الأفضل وضعه في نهاية الملف، عادةً بعد محتوى @section. يؤدي هذا إلى إبقاء التعليمات البرمجية المتعلقة بالبرنامج النصي منفصلة عن المحتوى الرئيسي، مما يؤدي إلى تحسين إمكانية القراءة وقابلية الصيانة.

   @extends('layout')

   @section('content')
       
   @endsection

   @push('scripts')
       @vite('resources/js/custom.js')
   @endpush

1. ترتيب عبارات @push المتعددة: إذا كان لديك عدة تعريفات @push لنفس المكدس (على سبيل المثال، @push('scripts'))، فسيتم إلحاقها بالترتيب الذي تظهر به في طريقة العرض. على سبيل المثال:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

في هذه الحالة، سيتم تحميل script1.js قبل script2.js لأن @push يضيف المحتوى إلى المكدس بالترتيب المعلن عنه.

1. استخدام @push في الأجزاء والمكونات: يمكن أيضًا استخدام @push في أجزاء الشفرة (على سبيل المثال، @include) أو مكونات الشفرة. يعد هذا مفيدًا لتضمين البرامج النصية أو الأنماط الخاصة بالعرض مباشرةً داخل المكونات القابلة لإعادة الاستخدام، مما يجعل من السهل إدارة التبعيات.

   
   

       
   

   @push('scripts')
       @vite('resources/js/partial-specific.js')
   @endpush

عندما يتم تضمين هذا الجزئي في طريقة عرض، ستتم إضافة جزئية محددة.js إلى حزمة البرامج النصية في ملف التخطيط.

1. التحكم في الترتيب باستخدام @prepend: إذا كانت هناك حاجة إلى تحميل نصوص برمجية معينة قبل البرامج النصية الأخرى في نفس المكدس، فيمكنك استخدام @prepend بدلاً من @push. @prepend يضع المحتوى في بداية المكدس، مما يسمح بتحكم أكبر في ترتيب التحميل.

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

هنا، سيتم تحميل Critical.js قبل Non_critical.js، بغض النظر عن موضعها في الملف Blade.

الوجبات السريعة الرئيسية

• ضع @push في نهاية طرق العرض للوضوح وقابلية الصيانة.
• يتم تحديد الترتيب حسب الموضع داخل العرض، مع تحميل عبارات @push السابقة أولاً.
• @push يعمل بشكل جزئي ومكونات، مما يجعل من السهل تضمين التبعيات الخاصة بالعرض.
• استخدم @prepend للنصوص البرمجية التي تحتاج إلى التحميل أولاً في نفس المكدس.

4. البديل: استخدام البيانات الشرطية المضمنة في التخطيط

إذا كنت بحاجة إلى تحكم أفضل في وقت تضمين JavaScript، فإن عبارات Laravel الشرطية تسمح بالمنطق القائم على المسار أو المتغير مباشرة في التخطيط.

تضمين مشروط بناءً على المسار

يمكنك استخدام عمليات التحقق من المسار مباشرة في التخطيط لتضمين JavaScript بناءً على المسار الحالي:

@if (request()->routeIs('some.route.name'))
    @vite('resources/js/custom.js')
@endif

تضمين مشروط بناءً على متغير

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

1. في وحدة التحكم الخاصة بك:

   return view('your.view', ['loadCustomJS' => true]);

1. في التخطيط:

   @if (!empty($loadCustomJS))
       @vite('resources/js/custom.js')
   @endif

يسمح لك هذا الأسلوب بالتحكم في تحميل JavaScript بناءً على متغيرات أو مسارات محددة، مما يوفر المرونة لإعدادات الصفحة المخصصة.

ملخص

إليك نظرة عامة سريعة على الطرق التي تمت مناقشتها:

• التضمين العالمي: ضع JavaScript في app.js وقم بتضمينه عالميًا باستخدام @vite.
• التضمين المشروط مع Stack وPush: استخدم توجيهات @stack و@push لمعالجة البرامج النصية المرنة والمعيارية، مما يضمن تحميل البرامج النصية فقط في طرق العرض حيث تكون هناك حاجة إليها.
• العبارات الشرطية في التخطيط: استخدم عمليات التحقق المستندة إلى المسار أو متغيرات وحدة التحكم لتحميل JavaScript بشكل مشروط مباشرة في التخطيط.

تسمح لك هذه الخيارات بالتحكم في تحميل JavaScript بدقة، مما يجعل مشروع Laravel 11 الخاص بك فعالاً وقابلاً للصيانة.