إستخدام حزمة بعد تنصيبها وإستدعائها في app.js داخل layout blade

ابراهيم الخليل سماني · 11 يونيو 2023

السلام عليكم,
واجهت مشكلة وهي عند تثبيت حزمة معينة و إستدعائها في app.js مثلا :

import Swal from 'sweetalert2'

و الأن أريد أن أستخدم هذه الحزمة في app.blade.phpبعد أنضمنت app.js

    @vite(['resources/css/admin.css', 'resources/js/app.js'])

هكذا

 <script>                         document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('clicked', function(e) {
console.log("from blade after clicked");
Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})
});
});
</script>

ولكنه يطبع لي في الكونسل أن Swal غير معرفة أضفت مؤخرا فقط DOMContentLoaded قلت ربما لم يتم تحميل app.js ولكن لايبدو ان المشكلة منها

Mustafa Suleiman · 11 يونيو 2023

المشكلة ليست في تحميل حزمة Swal أو app.js، إذ أنك تستدعي Swal بشكل صحيح في ملف app.js، والمشكلة الحالية تكمن في طريقة استخدامك لـ Swal في ملف app.blade.php.

وعندما تضمن ملف app.js في ملف app.blade.php باستخدام التوجيه الخاص بـ Laravel @vite، فإن محتوى ملف app.js يتم دمجه وتجميعه في ملف واحد للمتصفح.

وبالتالي أي متغيرات أو مكتبات معرفة في app.js لن تكون متاحة مباشرة في نطاق الملف app.blade.php.

عليك بتعديل ملف app.js بحيث تقوم بتصدير Swal كمتغير عالمي (global variable)، بالشكل التالي:

import Swal from 'sweetalert2';

window.Swal = Swal;

وبذلك ستصبح مكتبة Swal متاحة في النطاق العالمي، مما يمكنك من استخدامها في ملف app.blade.php بعد تضمين ملف app.js.

بلال زيادة · 12 يونيو 2023

إذا كانت Swal غير معرفة في ملف app.blade.php بعد استدعائها في ملف app.js، فقد يكون السبب في ذلك هو عدم تضمين ملف Swal في النهاية في الـ bundle الخاص بـ Vite.

يجب التأكد من ما إذا كانت مكتبة Swal مثبتة بشكل صحيح ومضمّنة في ملف app.js. يمكنك التحقق من ذلك بالتأكد من وجود السطر التالي في ملف app.js:

import Swal from 'sweetalert2';

تأكد أيضًا من تشغيل عملية ترحيل الملفات باستخدام Vite للتأكد من تضمين المكتبة بشكل صحيح في bundle. يمكنك استخدام الأمر التالي لتشغيل Vite:

npm run dev

إذا كنت قد اتبعت هذه الخطوات وما زالت Swal غير معرفة، قم بالتحقق من إعدادات Vite الخاصة بتضمين المكتبات الخارجية. قد يتطلب ذلك تكوين خيارات الـ plugins أو resolve.alias في ملف vite.config.js الخاص بك.

إذا استمرت المشكلة، يمكنك مراجعة مستندات Swal ومستندات Vite لمعرفة كيفية تضمين المكتبات وتكوين Vite بشكل صحيح.

ابراهيم الخليل سماني · 13 يونيو 2023

بتاريخ On 11‏/6‏/2023 at 21:50 قال بلال زيادة:
إذا كانت Swal غير معرفة في ملف app.blade.php بعد استدعائها في ملف app.js، فقد يكون السبب في ذلك هو عدم تضمين ملف Swal في النهاية في الـ bundle الخاص بـ Vite.

يجب التأكد من ما إذا كانت مكتبة Swal مثبتة بشكل صحيح ومضمّنة في ملف app.js. يمكنك التحقق من ذلك بالتأكد من وجود السطر التالي في ملف app.js:
import Swal from 'sweetalert2';
تأكد أيضًا من تشغيل عملية ترحيل الملفات باستخدام Vite للتأكد من تضمين المكتبة بشكل صحيح في bundle. يمكنك استخدام الأمر التالي لتشغيل Vite:
npm run dev
إذا كنت قد اتبعت هذه الخطوات وما زالت Swal غير معرفة، قم بالتحقق من إعدادات Vite الخاصة بتضمين المكتبات الخارجية. قد يتطلب ذلك تكوين خيارات الـ plugins أو resolve.alias في ملف vite.config.js الخاص بك.

إذا استمرت المشكلة، يمكنك مراجعة مستندات Swal ومستندات Vite لمعرفة كيفية تضمين المكتبات وتكوين Vite بشكل صحيح.

شكرا لك أستاذ @بلال زيادة لكن ليس المكتبات فقط بل حتى الدوال
أعطيك مثال واجهتني مثلا مشكلة في استخدام الدالة التالية بحيث لم تكن معرفة في app.blade

function toggleMenu() {
    document.getElementById('isToggle').classList.toggle('open');
    var isOpen = document.getElementById('navigation')
    if (isOpen.style.display === "block") {
        isOpen.style.display = "none";
    } else {
        isOpen.style.display = "block";
    }
};

إلا أنه لما حولتها عالمية

 window.toggleMenu = function () {
    document.getElementById('isToggle').classList.toggle('open');
    var isOpen = document.getElementById('navigation')
    if (isOpen.style.display === "block") {
        isOpen.style.display = "none";
    } else {
        isOpen.style.display = "block";
    }
};

تمت إستخدامها بشكل عادي هل هذا يعني أنني سأمر على كل المتغييرات و أحولها global ؟

Adnane Kadri · 13 يونيو 2023

مرحبا ابراهيم،

يوجد فرق بين استيراد وحدات ES لاستعمالها و استعمال وتصريح دوال الجافاسكربت العادية، فالذي تقوم به هاهنا:

import Swal from 'sweetalert2';

هو اسيتراد وحدة Swal كاستيراد افتراضي من الوحدة النمطية sweetalert2 فقط. اذ لا يعني هذا بالضرورة تصريحها بشكل عالمي global حتى يتسنى استعمالها من أي ملف عرض. فـ vite هنا لا يعتبرها اكثر من وحدة نمطية معينة ما لم يتم استعمالها، ولن يعني له ذلك شيئا ان كنت تستعملها في ملف blade مثلا. فهي ستبقى رغم ذلك غير معرفة ككائن أو كدالة ضمن النطاق العالمي global scope، ولكنها تبقى مستوردة كوحدة يمكن استعمالها من داخل ملف app.js حصرا .. ولذلك فإننا لو أردنا استعمالها في سياق خارج سياق app.js أو اي ملف يستورد Swal كوحدة نمطية سيظهر لنا مثل ما ظهر معك، ولذلك فإنه يقترح تصريحها بشكل explicit مع الكائن window لكي يمكن استعمالها.

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

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

هذا الملف هو ما يحوي هذا التصريح. مثال عملي:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
           document.addEventListener('DOMContentLoaded' , () => {
            Swal.fire(
              'Good job!',
              'You clicked the button!',
              'success'
            )
           })
        </script>

هذه هي الطريقة التي اعتدنا على العمل بها مع مكتبات الجافاسكربت سابقا سنين 2017 و 2018 وقبلهما قبل شيوع استعمال الوحدات.

أما ما تحاول استيراده فهو مكتوب بسياق ES كوحدات ES لا يصلح لهذا الاستعمال المباشر. وذات الأمر الأمر ينطبق على أي وحدات أخرى.

ان كنت تنوي التعامل مع دوال معينة بشكل ستاتيكي، قم بتجميعها في ملف public_js.js ضعه في مجلد public وقم بوصف مثل هاته الدوال به لكي يمكن استعمالها ضمن النطاق العالمي.

ابراهيم الخليل سماني · 13 يونيو 2023

@Adnane Kadri شكرا لك أخي عدنان مبدع كعادتك’
ولكن في هذه الحالة سأضع أغلب الدوال في public ولن يتم تجميعهم من طرف vite
كن أظن أن كل ملفات js من الأحسن تجميعها عبر vite بهذه الطريقة

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                // 'resources/css/app.css',
                'resources/scss/tailwind.scss',
                'resources/js/app.js',
                'resources/js/easy_background.js',
                'resources/js/plugins.init.js',
                'resources/libs/tiny-slider/tiny-slider.css',
                'resources/libs/tobii/css/tobii.min.css',
                'resources/libs/tobii/css/tobii.min.css',
                'resources/libs/tiny-slider/min/tiny-slider.js',
                'resources/libs/feather-icons/feather.min.js',
                'resources/libs/@mdi/font/css/materialdesignicons.min.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

هل هذا خطأ .؟

Adnane Kadri · 13 يونيو 2023

بتاريخ 12 دقائق مضت قال ابراهيم الخليل سماني:

@Adnane Kadri شكرا لك أخي عدنان مبدع كعادتك’
ولكن في هذه الحالة سأضع أغلب الدوال في public ولن يتم تجميعهم من طرف vite
كن أظن أن كل ملفات js من الأحسن تجميعها عبر vite بهذه الطريقة

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                // 'resources/css/app.css',
                'resources/scss/tailwind.scss',
                'resources/js/app.js',
                'resources/js/easy_background.js',
                'resources/js/plugins.init.js',
                'resources/libs/tiny-slider/tiny-slider.css',
                'resources/libs/tobii/css/tobii.min.css',
                'resources/libs/tobii/css/tobii.min.css',
                'resources/libs/tiny-slider/min/tiny-slider.js',
                'resources/libs/feather-icons/feather.min.js',
                'resources/libs/@mdi/font/css/materialdesignicons.min.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

هل هذا خطأ .؟

ليس خطأ، هذا أفضل بالطبع. سيعطي نفس النتيجة بشكل أنظف.

إستخدام حزمة بعد تنصيبها وإستدعائها في app.js داخل layout blade

السؤال

ابراهيم الخليل سماني

6 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

بلال زيادة

ابراهيم الخليل سماني

Adnane Kadri

ابراهيم الخليل سماني

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية