إعداد تطبيقات React المضيفة والبعيدة

يضيف التطبيق البعيد ModuleFederationPlugin إلى إعداد Webpack الخاص به مع ثلاث خصائص رئيسية: name (معرّف فريد، مثل "buttonApp")، وfilename ("remoteEntry.js" — ناتج البيان)، وexposes (خريطة من الاسم العام إلى مسار الملف المصدر).

يربط إعداد exposes مسار وحدة عامًا بملف محلي: { './Button': './src/Button' }. وهذا يعني أن المضيف يستطيع استيراد 'buttonApp/Button' والحصول على المكوّن من ./src/Button.tsx. ويمكنكم كشف مكونات متعددة أو أدوات مساعدة أو حتى صفحات كاملة.

تخبر الخاصية shared Module Federation بالوحدات التي ينبغي مشاركتها بين المضيف والتطبيق البعيد بدلًا من تكرارها. بالنسبة إلى React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. تمنع singleton:true تحميل نسخ متعددة في الوقت نفسه.

يتضمن إعداد ModuleFederationPlugin في تطبيق المضيف خاصية remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. المفتاح هو مساحة أسماء الاستيراد، والقيمة هي اسم التطبيق البعيد وعنوان URL الخاص به مدمجان باستخدام @ — لإخبار Webpack بمكان جلب التطبيق البعيد أثناء التشغيل.

في شيفرة React الخاصة بالمضيف، استوردوا المكوّن البعيد باستخدام استيراد ديناميكي: const Button = React.lazy(() => import('buttonApp/Button')). يطابق مسار الاستيراد مساحة أسماء التطبيق البعيد واسم الوحدة المكشوفة. يجعل React.lazy الاستيراد مقسّمًا إلى أجزاء ويُحمّل بصورة غير متزامنة.

بما أن الوحدات البعيدة تُحمّل بصورة غير متزامنة، احرصوا دائمًا على تغليف المكوّن البعيد المستورد بطريقة lazy داخل حدّ Suspense: Suspense fallback=Loading... /. يُصيّر البديل أثناء جلب Module Federation لملف remoteEntry.js وجزء المكوّن من عنوان URL الخاص بالتطبيق البعيد.

تعتمد hooks الخاصة بـ React (useState وuseContext وuseEffect) على نسخة داخلية واحدة من React لتتبّع حالة المكوّن. إذا حمّل كل من المضيف والتطبيق البعيد نسخته الخاصة من React، فستؤدي hooks إلى طرح أخطاء "invalid hook call". تفرض singleton:true مشاركة نسخة واحدة من React، مما يحل هذه الفئة من الأخطاء بالكامل.

عندما يستخدم المضيف react@18.2.0 ويستخدم التطبيق البعيد react@18.3.0، يتفاوض النطاق المشترك في Module Federation على الإصدار الذي سيُستخدم. مع singleton:true وrequiredVersion، يُستخدم عادةً الإصدار الأعلى إذا كان متوافقًا. يتيح ضبط requiredVersion: '>=18.0.0' بدلًا من إصدار محدد نطاقات إصدارات مرنة.

لا يعرف TypeScript الوحدات البعيدة أثناء الترجمة، لذلك ستؤدي عمليات الاستيراد مثل import('buttonApp/Button') إلى أخطاء في الأنواع من دون تعريفات. استخدموا @module-federation/typescript أو أنشئوا يدويًا ملفات .d.ts تعرّف أنواع الوحدات، لتحصلوا على أمان الأنواع للخصائص الممررة إلى المكونات البعيدة.

شغّلوا التطبيقين في الوقت نفسه: التطبيق البعيد على المنفذ 3001 والمضيف على المنفذ 3000. افتحوا المضيف — سيجلب وقت تشغيل Module Federation الخاص به http://localhost:3001/remoteEntry.js، ويكتشف وحدة Button، وينزّل الجزء الخاص بها، ثم يصيّرها داخل تطبيق المضيف كما لو كانت مكوّنًا محليًا.

في بيئة الإنتاج، استبدلوا localhost:3001 بعنوان URL المنشور للتطبيق البعيد. من الأنماط الشائعة استخدام متغير بيئة لعنوان URL الخاص بالتطبيق البعيد، بحيث يتمكن CI/CD من حقن العنوان الصحيح لكل بيئة: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

لماذا يجب إعداد React كمفردة في إعداد shared الخاص بـ Module Federation؟

يتطلب إعداد Module Federation استخدام ModuleFederationPlugin في كل من التطبيق البعيد (مع name وfilename وexposes) والمضيف (مع remotes). استهلكوا المكونات البعيدة عبر React.lazy + الاستيراد الديناميكي المغلف داخل Suspense. يجب مشاركة React وReact DOM كمفردتين لمنع أخطاء hooks الناتجة عن تعدد النسخ. وتكمل تعريفات TypeScript وعناوين URL للتطبيقات البعيدة المعتمدة على متغيرات البيئة إعدادًا جاهزًا للإنتاج.