عرض مصدر Laravel/frontend

<noinclude>{{DISPLAYTITLE: بناء Javascript و CSS }}</noinclude>

== مقدمة ==
لا يفرض Laravel عليك استخدام أي معالج [[JavaScript]] و [[CSS]]، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام [[Bootstrap]] و [[Vue]] ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر [[npm]] لتنصيب حزم الواجهات الأمامية هذه.

=== CSS ===
يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة [[CSS]] أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة [[CSS]] بصفة عامّة لكن يمكنك تفقّد توثيق [[Laravel/mix|Laravel Mix]] لمعلومات أدق حول Sass و Less.

=== JavaScript ===
لا يتطلب Laravel إطار [[JavaScript]] معيّن ليبني التطبيق. بل يمكنك ألّا تستعمل JavaScript على الإطلاق لكن Laravel يوفّر آليات أساسية للبناء لتسهيل بدء كتابة [[JavaScript]] عصرية باستعمال مكتبة [[Vue]]. يوفّر [[Vue]] واجهة برمجيّة (API) معبّرة لبناء تطبيقات [[JavaScript]] فعّالة باستعمال المكوّنات. كما ب [[CSS]]، يمكن استعمال [[Laravel/mix|Laravel Mix]] لترجمة مكوّنات [[JavaScript]] لملف [[JavaScript]] واحد جاهز للاستعمال من المتصفح.
حذف المكونات المساعدة لبناء الواجهات الرسومية
إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر <syntaxhighlight lang="php">
preset
</syntaxhighlight>هذا الأمر حين يضاف إليه الخيار <code>none</code>، سيحذف بناء [[Bootstrap]] و [[Vue]] ويبقي فقط على ملف Sass فارغ وبعض مكتبات خدمات [[JavaScript]] الشائعة:<syntaxhighlight lang="php">
php artisan preset none
</syntaxhighlight>

== كتابة CSS ==
يتضمن ملف package.json في Laravel حزم Bootstrap تساعد على البدء في إعداد نماذج أوليّة للواجهة الأمامية للتطبيق باستخدام Bootstrap. لكن لك الحريّة في إضافة أو حذف أي حزمة من package.json حسب حاجة التطبيق. لست مطالبًا باستخدام إطار Bootstrap، لكنّه يمثّل نقطة انطلاق جيّدة لمن اختار استخدامه. 
قبل ترجمة شيفرات CSS، ثبّت الاعتماديات اللازمة للواجهة الأمامية للتطبيق باستعمال  [https://www.npmjs.com/ إدارة حزم Node‏ (NPM]) ‏:<syntaxhighlight lang="php">
npm install
</syntaxhighlight>

بعد أن تُثبَّت الاعتماديات باستعمال npm install، يمكن الآن ترجمة ملفّات Sass لملفات CSS عاديّة باستعمال [https://wiki.hsoub.com/Laravel/mix Laravel Mix]. سيعالج الأمر npm run dev التعليمات في ملف webpack.mix.js. في العادة، ملفات CSS المترجَمة توضع في مجلد public/css<syntaxhighlight lang="php">
 npm run dev
</syntaxhighlight>

ملف webpack.mix.js المضَمّن مع Laravel سيترجم ملف Sass الموجود في resources/assets/sass/app.scss. هذا الملف app.scss سيستورد ملفًا من متغيّرات Sass وسيُحمّل Bootstrap، ممّا سيوفّر نقطة انطلاق جيدة لمعظم التطبيقات. لك حرية تخصيص الملف app.scss ليتناسب مع التطبيق، لكن إن أردت يمكنك استعمال معالج مسبق (pre-processor، مثل Less) مغاير بضبط Laravel Mix.

== كتابة JavaScript ==
كل اعتماديات JavaScript التي يتطلّبها التطبيق موجودة في الملف package.json من الملف الرئيسي للتطبيق. هذا الملف شبيه بملف composer.json، غير أنّه يحدِّد اعتماديات JavaScript بدل اعتماديات PHP. يمكن تثبيت التبعيّات باستعمال  إدارة حزم Node ‏(NPM):<syntaxhighlight lang="php">
npm install
</syntaxhighlight>

ملاحظة: افتراضيًا، يتضمن ملف package.json بعض الحزم مثل vue و axios للمساعدة على بدء بناء تطبيقات JavaScript. لك حريّة إضافة أو حذف من package.json حسب حاجة التطبيق.

بعد تثبيت الحزم، يمكن استعمال الأمر npm run dev لترجمة الملفات. Webpack هو مجمّع وحدات لبناء تطبيقات JavaScript. عند تنفيذ الأمر npm run dev، ينفّذ Webpack التعليمات الموجودة في الملف webpack.mix.js<syntaxhighlight lang="php">
npm run dev
</syntaxhighlight>

افتراضيًا، الملف webpack.mix.js سيترجم ملف Sass وملف resources/assets/js/app.js. في الملف app.js يمكنك تسجيل مكوّنات Vue، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق JavaScript الخاص بك. توجد ملفات JavaScript المترجمة عادة في المجلد public/js.
ملاحظة: الملف app.js سيُحمِّل resources/assets/js/bootstrap.js ممّا سيمهّد و يضبط Vue و Axios و jQuery و كل تبعيّات Javascript. بإمكانك القيام بهذا في هذا الملف.

=== كتابة مكوّنات Vue ===
في العادة، تطبيقات Laravel الجديدة تحتوي على ملف ExampleComponent.vue لمكوّنات Vue في المجلد resources/assets/js/components. الملف ExampleComponent.vue مثال على مكوّن Vue في ملف واحد الذي يعرّف كل من JavaScript وقالب HTML في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على JavaScript. مثالٌ عن مكوّنٍ موجودٍ في الملف app.js:
<syntaxhighlight lang="php">
Vue.component(

   'example-component',
   require('./components/ExampleComponent.vue')

);
</syntaxhighlight>

لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب HTML. على سبيل المثال، بعد تنفيذ الأمر make:auth لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب Blade في home.blade.php<syntaxhighlight lang="php">
@extends('layouts.app')

@section('content')

   <example-component></example-component>

@endsection
</syntaxhighlight>

ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر npm run dev كلّما تغيّر مكوّن Vue. أو يمكن تنفيذ الأمر npm run watch لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير.

إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات Vue، ممكن أن تقرأ توثيق Vue الذي يقدّم توثيقًا كاملًا سهل القراءة لإطار Vue.

=== استخدام React ===
إن كنت تفضل استخدام React لبناء تطبيقات JavaScript، يوفر Laravel طريقة لتغيير بناء Vue Ygn بناء React. على تطبيق Laravel جديدة، يمكن استعمال الأمر preset مع الخيار react:<syntaxhighlight lang="php">
php artisan preset react
</syntaxhighlight>

هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي.

مصادر 

[https://laravel.com/docs/5.6/frontend صفحة Frontend في توثيق Laravel الرسمي.]