مشكلة في تشغيل مشروع لارافيل باستخدام الأمر npm run dev

أهلا بك عبد الرؤوف، 

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

بالنسبة للمشكلة الخاصة بك، الخطأ يشير إلى عدم وجود أمر mix في نظام التشغيل الخاص بك. mix هو أداة تستخدم في إطار العمل Laravel لإدارة النماذج والهجرات وغيرها من العمليات.

قبل تشغيل الأمر npm run dev، تأكد من أن Laravel مثبت بشكل صحيح وأن جميع الاعتماديات تم تثبيتها بنجاح باستخدام الأمر .

composer install

يمكنك أيضًا التحقق من وجود mix عن طريق تنفيذ الأمر php artisan من مجلد المشروع في ترمينال Ubuntu. ستظهر لك قائمة بالأوامر المتاحة في Laravel ويجب أن يكون mix مدرجًا في هذه القائمة.

إذا لم يكن mix موجودًا، فقم بتنفيذ الأمر composer update ثم حاول تشغيل الأمر npm run dev مرة أخرى.

وإذا استمرت المشكلة أرجو تنفيذ الخطوات التالية لتثبيت mix:

1- تنفيذ الأمر التالي

npm install laravel-mix --save-dev

2- إنشاء ملف webpack.mix.js في الجذر الرئيسي للمشروع، وأضف به التالي:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

ويمكنك رؤية الإعدادات من خلال مستودع المشروع

3- الآن يجب تشغيل الأمر npx mix لتنفيذ الأوامر المتعلقة بـ mix داخل مجلد المشروع.

وأرجو منك قراءة التعليمات الخاصة بـ Mix في الموقع الرسمي:

https://laravel-mix.com/docs/6.0/installation

بتاريخ 1 ساعة قال Mustafa Suleiman:

أهلا بك عبد الرؤوف، 

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

بالنسبة للمشكلة الخاصة بك، الخطأ يشير إلى عدم وجود أمر mix في نظام التشغيل الخاص بك. mix هو أداة تستخدم في إطار العمل Laravel لإدارة النماذج والهجرات وغيرها من العمليات.

قبل تشغيل الأمر npm run dev، تأكد من أن Laravel مثبت بشكل صحيح وأن جميع الاعتماديات تم تثبيتها بنجاح باستخدام الأمر .

composer install

يمكنك أيضًا التحقق من وجود mix عن طريق تنفيذ الأمر php artisan من مجلد المشروع في ترمينال Ubuntu. ستظهر لك قائمة بالأوامر المتاحة في Laravel ويجب أن يكون mix مدرجًا في هذه القائمة.

إذا لم يكن mix موجودًا، فقم بتنفيذ الأمر composer update ثم حاول تشغيل الأمر npm run dev مرة أخرى.

وإذا استمرت المشكلة أرجو تنفيذ الخطوات التالية لتثبيت mix:

1- تنفيذ الأمر التالي

npm install laravel-mix --save-dev

2- إنشاء ملف webpack.mix.js في الجذر الرئيسي للمشروع، وأضف به التالي:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

ويمكنك رؤية الإعدادات من خلال مستودع المشروع

3- الآن يجب تشغيل الأمر npx mix لتنفيذ الأوامر المتعلقة بـ mix داخل مجلد المشروع.

وأرجو منك قراءة التعليمات الخاصة بـ Mix في الموقع الرسمي:

https://laravel-mix.com/docs/6.0/installation

شكرا @Mustafa Suleiman

بالنسبة لطرح السؤال في مكانه الصحيح سأحاول أن أفعل  لك في المرات القادمة،

لقد تم حل المشكلة بنجاح،

لدي سؤال اخر هو ماذا لو أردت استخدام vite بدلا من webpack mix،

كيف يسعني ذلك؟

يوجد دليل كامل في مستندات Laravel عن كيفية استخدام Vite، وإليك الخطوات:

1- تثبيت Vite

يجب الإنتباه إلى أنه في الإصدارات الأخيرة يأتي Vite مدمج في إطار لارافيل وكل ما تحتاجه هو تشغيل الأمر  npm run dev فقط.
ولكن إذا كان غير موجود فإليك طريقة تثبيته.

يمكنك تثبيت Vite باستخدام npm باستخدام الأمر التالي:

npm install -D vite laravel-vite-plugin

2- تحرير ملف package.json

عليك تحديث ملف package.json وإضافة مجموعة من الأوامر لتسمح لك بتشغيل Vite. بدلاً من استخدام Laravel Mix، تحتاج إلى إضافة أوامر Vite إلى ملف scripts، على النحو التالي:

   "scripts": {
        "dev": "vite",
        "build": "vite build"
    },

3- حذف ملف webpack.mix.js

يجب أن تحذف ملف webpack.mix.js فلم نعد بحاجة إليه.

4- يجب إنشاء ملف vite.config.js ووضع الإعدادات التالية بداخله، ويمكنك قراءة المزيد عن الإعدادات في رابط المستند الذي أشرت إليه.

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

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

4- تحديث ملف العرض الرئيسي

ستحتاج إلى تحديث ملف العرض الرئيسي الخاص بك وهو app.blade.php الموجود في المسار resources/views/layouts/ لتحويل الاستدعاءات الخاصة بـ Laravel Mix إلى استدعاءات Vite. يجب أن يكون شكل الاستدعاءات على هذا النحو:

    <head>
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

والآن يمكنك تشغيل المشروع من خلال الأمر npm run dev.

الطريقة الأسهل لتثبيت Vite في مشروع لارافيل

 باستخدام Laragon قم بالضغط بزر الفأرة الأيمن داخل نافذة البرنامج وستظهر لك قائمة، اختر منها التالي:

• Quick app ثم اختر Laravel

وبذلك سيتم إنشاء مشروع لارافيل مع Vite في ملف Root الخاص بـ Laragon، بعد ذلك يمكنك نقل ملفات مشروع إلى المجلد لكن بعد حذف ملفات Mix.