إنشاء JSX في إضافة ووردبريس: مشكلة مراقبة Webpack للمجلدات

إن إنشاء إضافات (Plugins) لوردبريس يتطلب معرفة متقدمة بتطوير الويب وأدوات البرمجة الحديثة. تعتبر JSX وReact من الأدوات القوية التي يمكن استخدامها في تطوير إضافات ووردبريس، ولكن قد تواجه تحديات أثناء تكوين أدوات البناء مثل Webpack. في هذا المقال، سنناقش كيفية بناء JSX في إضافة ووردبريس، وسنستعرض كيفية إعداد Webpack بشكل صحيح لمراقبة وبناء الملفات من مجلد الأصول إلى مجلد التوزيع.

هيكل الإضافة

عند القيام بتطوير إضافة جديدة، يجب أن يكون لديك هيكل منظم لترتيب ملفات JavaScript. في الغالب، ستقوم باستخدام مجلدات مختلفة لتقسيم الشيفرة البرمجية إلى أجزاء، مثل مجلد خاص بالملفات الإدارية وآخر للملفات المساعدة. هيكل الإضافة يمكن أن يكون على النحو التالي:

my-plugin
    |_assets
        |_js
            |_admin
                |_js1.js
            |_helper
                |_helper.js
    |_dist
        |_js

إعداد Webpack بشكل صحيح

من أهم الخطوات في إعداد Webpack هو تكوينه ليكون قادرًا على مراقبة مجلد الأصول وجمع الملفات في مجلد التوزيع. للقيام بذلك، يجب إعداد ملف webpack.config.js بالشكل الصحيح. هنا نموذج لتكوين Webpack يمكن استخدامه:

const path = require('path');
module.exports = {
    mode: 'production',
    entry: './assets/js/admin/js1.js',
    output: {
        filename: 'js1.js',
        path: path.resolve(__dirname, 'dist/js/admin')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
}

استخدام هذا الإعداد سيمكن Webpack من بناء ملف js1.js من مجلد assets/js/admin ووضعه في مجلد dist/js/admin.

إعداد Babel

نبذة عن إعداد Babel، يمكنك استخدام ملف .babelrc لتحديد إعدادات Babel، مما يسهل عملية تحويل الشيفرة البرمجية المكتوبة بـ JSX إلى JavaScript عادي يمكن للمتصفح فهمه. ملف .babelrc يمكن أن يكون كالتالي:

{
  "presets": [
    "@wordpress/babel-preset-default"
  ]
}

هذا الإعداد سيمكنك من استخدام ميزات JavaScript الحديثة وJSX في تطوير إضافتك.

التأكد من أداء Webpack

بعد إعداد Webpack وBabel، عليك التأكد من أن Webpack يعمل بشكل صحيح. يمكنك البدء بتشغيل Webpack في وضع المراقبة (watch mode) باستخدام الأمر:

npx webpack --watch

بهذا الشكل، سيتابع Webpack أي تغييرات تطرأ على ملفات JavaScript في مجلد الأصول ويقوم ببنائها تلقائيًا في مجلد التوزيع.

خاتمة

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

إذا كنت تواجه صعوبة في إعداد Webpack أو لديك أي استفسارات، فإن الممارسات المذكورة أعلاه ستكون دليلًا جيدًا لحل مشاكلك.