أساسيات Module Federation
فهم كيفية إتاحة مشاركة micro-frontends باستخدام Module Federation
أساسيات Module Federation درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما المقصود بـ Module Federation؟
يتيح Module Federation لتطبيق JavaScript تحميل شيفرة من تطبيق آخر مستقل في نشره وتنفيذها وقت التشغيل. وقد نشأ هذا النهج في Webpack 5، وأصبح ممكنًا الآن أيضًا باستخدام خرائط الاستيراد الأصلية والاستيراد الديناميكي.
حالة الاستخدام
تقسّم المؤسسات الكبيرة التطبيقات المت monolithic إلى عدة "واجهات أمامية مصغّرة" تُنشر بصورة مستقلة، أي مضيف غلاف إلى جانب عدة تطبيقات للميزات. ويتيح Module Federation للغلاف تحميل كل ميزة عند الطلب من دون تجميعها معًا وقت البناء.
Federation في Webpack
في Webpack 5، يعلن المضيف عن remotes (التطبيقات الأخرى التي سيستهلكها)، وتعلن التطبيقات البعيدة عن exposes (ما توفره). يجلب وقت التشغيل بيانًا صغيرًا من كل تطبيق بعيد عند البدء، وينزّل الأجزاء عندما يستوردها المضيف.
البدائل الأصلية
من دون Webpack، تعمل الفكرة نفسها باستخدام خرائط استيراد تشير إلى حزم ESM بعيدة، والاستيراد الديناميكي للتحميل. تقول خريطة استيراد المضيف "feature-cart": "https://cart-team.example.com/entry.js"؛ ويحمّل import("feature-cart") أحدث إصدار منشور.
<script type="importmap">
{
"imports": {
"feature-cart": "https://cart.example.com/v1/entry.js",
"feature-checkout": "https://checkout.example.com/v2/entry.js"
}
}
</script>التبعيات المشتركة
من دون تنسيق، سيضمّن كل تطبيق بعيد نسخته الخاصة من React. وتتيح أدوات Federation الإعلان عن التبعيات المشتركة؛ فأول تطبيق بعيد يحمّل React يجعله متاحًا لجميع التطبيقات الأخرى. أما الأساليب الأصلية فتستخدم خرائط الاستيراد لتوجيه كل تطبيق بعيد إلى عنوان URL نفسه الخاص بـ React.
النشر المستقل
يمتلك كل فريق تطبيقه البعيد وينشره في الوقت الذي يريده. ولا يعيد المضيف البناء، بل يلتقط الإصدارات الجديدة عند تحميل الصفحة التالي (أو عبر إبطال التخزين المؤقت). ويفصل ذلك دورات الإصدار فصلًا كاملًا.
استراتيجيات إدارة الإصدارات
ثبّتوا التطبيقات البعيدة على عناوين URL ذات إصدارات (/v1/entry.js و/v2/entry.js) حتى تكون ترقية المضيف مقصودة بدلًا من أن تكون ضمنية. وتستخدم بعض الفرق مطابقة semver على مستوى خريطة الاستيراد عبر أدوات مثل JSPM.
المفاضلات
يضيف Federation تعقيدًا وقت التشغيل: طلبات شبكة أكثر، وتصحيح أخطاء أصعب عبر المصادر المختلفة، وخطر عدم توافق التبعيات المشتركة. استخدموه عندما تحتاجون فعلًا إلى النشر المستقل؛ أما المشاريع الأصغر، فالبناء الواحد أبسط وأسرع.
عزل الأخطاء
يجب ألا يؤدي تعطل وحدة بعيدة واحدة إلى إسقاط المضيف. غلّف عمليات الاستيراد الديناميكية بحدود الأخطاء (React) أو باستخدام try/catch (vanilla)، واعرض واجهة احتياطية عند فشل وحدة بعيدة. يظل الغلاف يعمل حتى إذا تعطلت إحدى الميزات مؤقتًا.
أمان الأنواع
لا تتوفر للصادرات البعيدة معلومات عن الأنواع أثناء الترجمة داخل المضيف. أنشئ أنواع TypeScript مشتركة في حزمة منفصلة يستهلكها الطرفان، أو استخدم التحقق أثناء التشغيل (Zod وio-ts) عند حدود الفيدرالية.
الفيدرالية الأصلية مقابل الأدوات
الفيدرالية الأصلية (خرائط الاستيراد + ESM) أبسط وتعتمد على المعايير، لكنها تفتقر إلى تنسيق التبعيات المشتركة الذي يوفره Webpack. اختر Webpack/Module Federation للتطبيقات المعقدة ذات التبعيات المشتركة الكثيفة، واختر الفيدرالية الأصلية لإعدادات micro-frontend الأبسط.
الاتجاه المستقبلي
يستكشف W3C بدائيات أكثر تطورًا لتحميل الوحدات، من شأنها أن تجعل الفيدرالية الأصلية أكثر قدرة — بما في ذلك تحسين التفاوض بشأن التبعيات المشتركة. في الوقت الحالي، تعامل مع خرائط الاستيراد بوصفها الأساس، ثم أضف أدوات الفيدرالية فوقها.
اختبار المعرفة
ما الدافع الأساسي لاستخدام Module Federation في تطبيق كبير؟
الملخص
يتيح Module Federation للمضيف تحميل التعليمات البرمجية من وحدات بعيدة منشورة بصورة مستقلة أثناء التشغيل. تضيف أدوات Webpack 5 التفاوض بشأن التبعيات المشتركة، بينما تستخدم الفيدرالية الأصلية خرائط الاستيراد والاستيراد الديناميكي. استخدمه في معماريات micro-frontend التي تضم فرقًا متعددة، وتقبّل التعقيد الإضافي مقابل حرية النشر المستقل.
الأسئلة الشائعة
هل درس «أساسيات Module Federation» مجاني؟
نعم — نص درس «أساسيات Module Federation» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «أساسيات Module Federation»؟
فهم كيفية إتاحة مشاركة micro-frontends باستخدام Module Federation تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أساسيات Module Federation»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نصوص وحدات ES من النوع type=module
- خرائط الاستيراد importmap
- الاستيراد الديناميكي import() في الوحدات
- أساسيات Module Federation