كيفية الانتقال من Vite إلى Laravel Mix في مشروع Laravel؟

أعتقد أن هذا الخطأ يحدث بسبب تعاملٍ غير صحيحٍ مع ملف webpack.mix.js في مشروع Laravel Mix. يبدو أن الملف webpack.mix.js يتم التعامل معه على أنه ملف ES Module، ولكن webpack.config.js لا يدعم تحميل هذا النوع من الملفات.

لحل هذا المشكلة، يمكنك تغيير اسم الملف webpack.mix.js إلى اسم ينتهي بـ .cjs، أو يمكنك تغيير "type": "module" في ملف package.json إلى "type": "commonjs" ليتم التعامل مع جميع الملفات .js على أنها CommonJS وليس ES Module. 

الخطأ الذي تواجهه يشير إلى أن ملف webpack.mix.js يتم التعامل معه كـ ES Module بسبب وجود "type": "module" في ملف package.json الخاص بالمشروع.

هناك ثلاثة حلول يمكنك تجربتها:

• إعادة تسمية ملف webpack.mix.js لينتهي بامتداد .cjs، على سبيل المثال webpack.mix.cjs.
• قم بتغيير الكود الذي يستدعي webpack.mix.js لاستخدام import() الديناميكي بدلاً من require(). يمكنك قراءة المزيد عن استخدام import() في وثائق Node.js.

• قم بتغيير قيمة "type": "module" في ملف package.json إلى "type": "commonjs" للتعامل مع جميع ملفات .js كـ CommonJS. يمكنك استخدام امتداد .mjs للوحدات ES بدلاً من ذلك.

يرجى ملاحظة أن هذه الحلول تتطلب تعديل المشروع الخاص بك وفقًا للحل الذي تفضله وتتناسب مع بيئتك.

في البداية أنا لا أنصحك بالإنتقال من Vite إلى Laravel Mix وتم توضيح سبب ذلك في النقاش التالي:

سأشرح لك طريقة الإنتقال من استخدام Vite إلى Laravel mix بشكل صحيح:

أولاً عليك بحذف Vite من المشروع وذك عن طريق حذف أي حزم متعلقة بـ Vite في ملف package.json مثل التالي:

"laravel-vite-plugin": "^0.7.5",
و
"vite": "^4.0.0"

وأيضًا حذف ملف vite.config.js وملف package-lock.json ومجلد node_modules.

والآن قم بالتالي:

1- تثبيت Laravel Mix باستخدام npm عن طريق الأمر التالي في مجلد المشروع:

npm install laravel-mix --save-dev

2- بعد التثبيت، ستحتاج إلى إنشاء ملف webpack.mix.js في جذر مشروع Laravel حيث سيحتوي على تكوينات Laravel Mix.

في ملف webpack.mix.js، يمكنك تحديد مدخلات ومخرجات ملفات CSS و JavaScript.

مثلاً، إذا كان لديك ملف app.css و app.js تحت مجلد resources/assets/css و resources/assets/js على التوالي، سيكون شكل الكود كالتالي:

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

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/css/app.scss', 'public/css');

في المثال، سيتم دمج ملف app.js وتحويله إلى ملف JavaScript واحد في المسار public/js وكذلك ملف app.scss سيتم دمجه وتحويله إلى ملف CSS واحد في المسار public/css.

وبإمكانك تكوين المزيد من المدخلات والمخرجات حسب احتياجات مشروعك.

وللمزيد عن طريقة الاستخدام قم بقراءة المستند الرسمي من هنا:

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

أو قراءة الدليل العربي من موسوعة حسوب:

• https://wiki.hsoub.com/Laravel/mix

3- بعد تكوين webpack.mix.js، تستطيع تشغيل Laravel Mix باستخدام الأمر التالي:

npx mix

وسيبدأ Laravel Mix في دمج وتحويل الملفات وفقًا للتكوينات المحددة.

وإذا كنت ترغب في تشغيل Mix على مدار الوقت أثناء التطوير، فاستخدم الأمر التالي بدلاً من الأمر السابق:

npx mix watch

سيبدأ Mix في الاستماع إلى أي تغييرات في الملفات وتنفيذ المهام المطلوبة تلقائيًا.

أو تستطيع استخدام السكريبتات في ملف package.json لاستخدامها بدلاً من الأوامر السابقة كالتالي:

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

ولتشغيل Mix على مدار الوقت أثناء التطوير، فاستخدم الأمر npm run watch.

وبخصوص رسالة الخطأ التي تظهر لك،  فهى تعني أن ملف webpack.mix.js يتم التعامل معه كملف ES Module، وذلك لأن ملف package.json الأساسي في مشروعك يحتوي على "type": "module".

حاول القيام بالتالي:

1- تغيير اسم الملف webpack.mix.js لينتهي بامتداد .cjs بدلاً من .js، أي تغيير اسم الملف إلى مثلاً webpack.mix.cjs.

2- تغيير رمز الاستيراد في ملف webpack.config.js من require() إلى استخدام import() الديناميكي.

حيث يعمل import() مع جميع CommonJS modules، وبالتالي تستطيع استخدامه في ملف webpack.config.js، أي استبدال السطر 11 في ملف webpack.config.js بالتالي:

const { mix } = import('laravel-mix');

بعد ذلك، عليك بتعديل قيمة "type" في ملف package.json إلى "commonjs" بدلاً من "module".

أي تغيير السطر الذي يحتوي على "type": "module" في ملف package.json إلى التالي:

"type": "commonjs"