اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل
افهم كيف يحمّل Webpack Module Federation الوحدات البعيدة وقت التشغيل دون تجميعها ضمن المضيف
اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
المشكلة التي يحلّها Module Federation
في مؤسسة للواجهات الأمامية تضم فرقًا متعددة، تحتاج تطبيقات مستقلة متعددة النشر غالبًا إلى مشاركة مكونات واجهة المستخدم والأدوات المساعدة. ويتطلب النشر إلى npm زيادة رقم الإصدار، وإصدارًا جديدًا، وإعادة نشر كاملة لكل تطبيق مستهلك، مما ينشئ اقترانًا وثيقًا بين الفرق ويبطئ دورات التكرار.
نهج npm وعيوبه
يعني النهج التقليدي (نشر الشيفرة المشتركة كحزمة npm) أن تحديث مكوّن زر مشترك يتطلب: تحديث حزمة npm، ونشر إصدار جديد، وتحديث package.json في كل تطبيق مستهلك، ثم إعادة بناء كل تطبيق مستهلك وإعادة نشره. يلغي Module Federation جميع هذه الخطوات.
ما الذي يفعله Module Federation
يتيح Module Federation لتطبيق واحد (يُسمى "remote") كشف وحدات JavaScript يمكن لتطبيق آخر (يُسمى "host") تحميلها وتنفيذها أثناء التشغيل، من دون إعادة بناء المضيف أو إعادة نشره. عند تحميل المستخدم لتطبيق المضيف، يجلب وحدات التطبيق البعيد ديناميكيًا عند الطلب.
الدعم الأصلي في Webpack 5
قدّم Webpack 5 ميزة Module Federation بوصفها ميزة مدمجة أساسية من خلال ModuleFederationPlugin. وقبل Webpack 5، كانت الأنماط المشابهة تتطلب إعدادًا يدويًا معقدًا أو إضافات من جهات خارجية. تتولى الإضافة تلقائيًا كل عمليات التحميل الديناميكي وإدارة النطاق المشترك.
المفاهيم الأساسية: Remotes
التطبيق البعيد هو تطبيق مستقل النشر يكشف وحدة واحدة أو أكثر — مثل مكونات React أو الأدوات المساعدة أو صفحات الميزات الكاملة — لتستهلكها تطبيقات أخرى. ينشئ التطبيق البعيد بيانًا باسم remoteEntry.js يصف ما يكشفه وكيفية تحميله.
المفاهيم الأساسية: Hosts
المضيف هو تطبيق يستهلك وحدات من تطبيق بعيد واحد أو أكثر. يشير المضيف إلى التطبيقات البعيدة بالاسم وعنوان URL في إعدادات Webpack الخاصة به. عندما تستورد شيفرة المضيف وحدة بعيدة، يجلب وقت تشغيل Module Federation الوحدة وينفذها ديناميكيًا من عنوان URL الخاص بالتطبيق البعيد.
المفاهيم الأساسية: الوحدات المشتركة
الوحدات المشتركة هي مكتبات (مثل React وReact DOM) يجب تحميلها مرة واحدة فقط، حتى إذا أدرجها كل من المضيف والتطبيق البعيد. عند تحديد React كمفردة مشتركة، يضمن Module Federation تشغيل إصدار واحد فقط من React — وهذا أمر بالغ الأهمية لأن hooks الخاصة بـ React تتعطل عند وجود نسخ متعددة.
بيان remoteEntry.js
عند بناء تطبيق بعيد، ينشئ Webpack ملف remoteEntry.js باسم الملف المُعدّ. هذا الملف بيان خفيف الوزن ونص إقلاع: يعلن الوحدات التي يكشفها التطبيق البعيد، ويسرد عناوين URL لأجزاء الشيفرة الخاصة بها، ويهيئ النطاق المشترك. ينزّل المضيف هذا الملف أولًا لاكتشاف ما يقدمه التطبيق البعيد.
آلية التحميل أثناء التشغيل
عندما يصادف المضيف استيرادًا من وحدة بعيدة، يتحقق مما إذا كانت شيفرة التطبيق البعيد محمّلة بالفعل. وإذا لم تكن محمّلة، فإنه يجلب remoteEntry.js من عنوان URL الخاص بالتطبيق البعيد، ويهيئ النطاق المشترك (ويتفاوض على إصدارات المكتبات المشتركة)، ثم ينزّل الجزء المحدد الذي يحتوي على الوحدة المطلوبة وينفذه.
النشر المستقل عمليًا
ينشر فريق إصدارًا جديدًا من تطبيقه البعيد (يتضمن مكوّن Button محدّثًا) من دون تعديل تطبيق المضيف. يحصل المستخدم التالي الذي يحمّل المضيف على Button الجديد تلقائيًا، لأن المضيف يجلب دائمًا من عنوان URL الحالي لملف remoteEntry.js. لا حاجة إلى إعادة بناء المضيف أو إعادة نشره أو إلى تنسيق بين الفرق.
Module Federation مقابل إطارات iframe
يستخدم أحد أنماط الواجهات الأمامية المصغّرة الأقدم إطارات iframe لعزل الأقسام المملوكة للفرق. توفر إطارات iframe عزلًا قويًا، لكنها تجعل مشاركة الحالة وتوجيه عناوين URL وتنسيق الأنماط أمورًا صعبة للغاية. يحافظ Module Federation على كل شيء ضمن سياق JavaScript نفسه، مما يتيح مشاركة التوجيه وحالة المصادقة والأنماط المتسقة.
بيان التطبيق البعيد في Module Federation
ما دور remoteEntry.js في Module Federation؟
مراجعة الدرس
يحل Module Federation مشكلة النشر المستقل للشيفرة المشتركة للواجهات الأمامية عبر تمكين تحميل الوحدات أثناء التشغيل. تكشف التطبيقات البعيدة الوحدات من خلال remoteEntry.js، ويستهلكها المضيفون ديناميكيًا من دون إعادة بناء. تمنع المفردات المشتركة (React وReact DOM) تحميل المكتبات المكررة. تتيح هذه البنية نشرًا مستقلًا حقيقيًا: حدّث تطبيقًا بعيدًا، وسترى جميع تطبيقات المضيف التغيير فورًا.
الأسئلة الشائعة
هل درس «اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل» مجاني؟
نعم — نص درس «اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل»؟
افهم كيف يحمّل Webpack Module Federation الوحدات البعيدة وقت التشغيل دون تجميعها ضمن المضيف تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- اتحاد الوحدات: الاستيراد الديناميكي وقت التشغيل
- إعداد تطبيقات React المضيفة والبعيدة
- مشاركة الحالة والتوجيه بين التطبيقات البعيدة
- إدارة الإصدارات والنشر والتنسيق