حل مشكلة استيراد d3.event باستخدام Rollup

ما تحتاج إليه هو ضمان أن استيراد d3.event يكون ملزمًا بشكل مباشر بالمكونات الداخلية لـ D3، بدلاً من أن يتم فقط استيراده من الحزمة UMD المولدة. وهذا يتطلب ضبط عملية البناء باستخدام Rollup بطريقة معينة.

قبل أن نناقش كيفية القيام بذلك، دعني أوضح لك ما هي المشكلة التي تواجهها بشكل أكبر. عندما تقوم بتضمين ملف d3.custom.build.js الذي تم بناؤه بواسطة Rollup في صفحة الويب الخاصة بك، تجد أن القيمة المسترجعة لـ d3.event دائمًا null، بغض النظر عن الحدث الذي يحدث. هذا يعني أن استيراد event ليس عبارة عن “ربط مباشر” بالقيمة المستخدمة في D3 نفسها.

الحل يكمن في ضبط Rollup لاستيراد event بشكل يضمن استخدامه كربط حي. للقيام بذلك، سنقوم بإجراء التغييرات التالية في ملف rollup.config.js:

1. استخدم resolve plugin بدلاً من nodeResolve.
2. قم بتحديد خيار browser لـ resolve plugin لضمان استخدام المكونات الصحيحة لـ D3.
3. قم بتعيين module إلى false لضمان عدم دمج أي مكونات إضافية بالإضافة إلى d3.event.

الآن، سأقوم بتوضيح كيفية تنفيذ هذه التغييرات:

javascriptCopy code
import resolve from '@rollup/plugin-node-resolve';

export default {
    input: './js/vendor/d3-custom-build.js',
    output: {
        file: './js/vendor/d3-custom-built.js',
        format: 'iife',
        name: 'd3',
        extend: true
    },
    plugins: [
        resolve({
            browser: true,
            module: false
        })
    ]
};

باستخدام هذه التغييرات، يجب أن يتم الآن استيراد d3.event كربط حي، مما يسمح بالوصول الصحيح إلى الحدث الحالي في بيئة الويب الخاصة بك. وبهذا، يجب أن يتم حل مشكلتك ويعمل كل شيء كما يجب في ملف الإخراج d3-custom-built.js.

بالطبع، دعنا نكمل المقال بمزيد من التفاصيل والشروحات لتوضيح العملية بشكل أفضل.

بعد إجراء التغييرات المقترحة في ملف rollup.config.js، ستلاحظ أن قيمة d3.event لم تعد null بعد الآن. هذا لأن Rollup الآن يقوم بضمان استيراد event كربط حي، وبالتالي يمكنك الوصول إلى الحدث الحالي بشكل صحيح في بيئة الويب الخاصة بك.

لفهم أفضل للتغييرات التي قمنا بها، دعنا نقدم شرحاً مفصلاً لكل تغيير:

1. استخدام resolve plugin: بدلاً من nodeResolve، قمنا باستخدام resolve plugin الذي يسمح بحل استيرادات الملفات. هذا يتيح لنا تحديد المكونات المستوردة بشكل أدق، بما في ذلك استيراد d3.event كربط حي.

2. تحديد خيار browser لـ resolve plugin: عند تعيين browser: true، يقوم Rollup بحساب المسارات بشكل يتوافق مع متصفح الويب، مما يضمن استخدام الإصدارات الصحيحة للمكونات عند الاستيراد.

3. تعيين module إلى false: هذا يمنع Rollup من دمج أي مكونات إضافية بالإضافة إلى d3.event. بتعيينه إلى false، نضمن استخدام الاستيراد كربط حي وليس دمج القيم في المخرجات.

مع هذه التغييرات، يجب أن تكون قادرًا الآن على استخدام d3.event بنجاح في ملف الإخراج d3-custom-built.js. هذا يعني أنك يمكنك الآن التحكم في الأحداث في صفحة الويب الخاصة بك باستخدام D3 بنجاح، دون القلق بشأن قيمة null غير متوقعة.