مشاركة التبعيات
شارك Angular والمكتبات بين الوحدات البعيدة
مشاركة التبعيات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
لماذا نشارك الاعتماديات
إذا قام المضيف وثلاثة remotes بتجميع نسخة خاصة بكل منها من Angular، فسيُنزّل المتصفح Angular أربع مرات، والأسوأ أنه سينتهي بوجود نسخ متعددة من Angular تؤدي إلى تعطيل حقن الاعتماديات. وتضمن المشاركة تحميل نسخة واحدة مرة واحدة وإعادة استخدامها من الجميع.
قسم shared
في federation.config.js، يحدّد الكائن shared الاعتماديات المشتركة بين المضيف والـ remotes. وتزيل Native Federation التكرار بينها وقت التشغيل.
module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true }),
},
});المساعد shareAll
تشارك shareAll() كل اعتماديات package.json بإعداد واحد، وهو نقطة البداية الشائعة. ويمكنكم بعد ذلك تجاوز الإعداد لحزم محددة.
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}singleton: لماذا يهم ذلك في Angular
تفرض singleton: true وجود نسخة واحدة بالضبط من الحزمة في التطبيق بأكمله. ويجب أن تكون Angular core وRxJS والموجّه Singleton؛ إذ تعني نسختان من @angular/core وجود شجرتي حقن وأخطاء وقت التشغيل.
التفاوض على الإصدارات
عندما تطلب الـ remotes إصدارات مختلفة، تختار federation إصدارًا متوافقًا. ويؤدي strictVersion: true إلى إظهار خطأ عند عدم التوافق بدلًا من تحميل إصدار غير متطابق بصمت، مما يكشف المشكلات مبكرًا.
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}مشاركة مكتباتكم الخاصة
ينبغي أن تكون مكتبة نظام التصميم أو المصادقة المشتركة Singleton أيضًا، حتى تظل الحالة (مثل المستخدم الحالي) متسقة. شاركوها صراحةً باستخدام اسمها.
shared: {
'@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
'@myorg/auth': { singleton: true },
}requiredVersion: auto
يقرأ requiredVersion: 'auto' الإصدار من package.json، لذلك لا تحتاجون إلى كتابته يدويًا. ويحافظ ذلك على تزامن الإعدادات أثناء ترقية الاعتماديات.
ما يحدث وقت التشغيل
ينشئ كل بناء بيانات وصفية حول حزمته المشتركة. وعند التحميل، تقارن federation الإصدارات بين المضيف والـ remotes وتقدّم وحدة مشتركة واحدة عبر خريطة الاستيراد، لذلك يجلبها المتصفح مرة واحدة فقط.
تكلفة عدم المشاركة
يُعد نسيان مشاركة Angular الخطأ التقليدي: فقد يبدو التطبيق وكأنه يعمل، ثم يُطلق أخطاء غامضة مثل "NG0203: inject() must be called from an injection context" بسبب وجود نسختين من Angular. وتمنع المشاركة باعتبارها Singleton حدوث ذلك.
الحفاظ على اتساق الإصدارات
قد تتباعد الإصدارات بسبب عمليات النشر المستقلة. ينبغي أن تتفق الفرق على نطاق مشترك لحزم الإطار وأن ترقيها بتنسيق، لأن مضيفًا يعمل بـ Angular 18 لا يمكنه المشاركة بأمان مع remote يتطلب Angular 17.
تجاوز حزمة مشتركة
قد يحتاج remote أحيانًا إلى نسخة معزولة خاصة به من أداة مساعدة صغيرة. يمكنكم استبعادها من المشاركة لتُضمّن في حزمته الخاصة، مع قبول الحجم المكرر مقابل الاستقلالية.
shared: {
...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding itتحقق سريع
ما الحزم التي يجب أن تكون Singleton؟
مراجعة
صرّحوا بالاعتماديات shared (غالبًا عبر shareAll) حتى يحمّل المضيف والـ remotes نسخة واحدة. اجعلوا حزم الإطار والمكتبات التي تحتفظ بالحالة (@angular/core والموجّه وRxJS ومكتبة المصادقة الخاصة بكم) تستخدم singleton: true؛ واستخدموا strictVersion وrequiredVersion: 'auto' لاكتشاف اختلاف الإصدارات. يؤدي نسيان مشاركة Angular إلى أخطاء DI.
الأسئلة الشائعة
هل درس «مشاركة التبعيات» مجاني؟
نعم — نص درس «مشاركة التبعيات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «مشاركة التبعيات»؟
شارك Angular والمكتبات بين الوحدات البعيدة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «مشاركة التبعيات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.