npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

الشرح:

• React.lazy(() => import('RemoteApp/Widget')): هذا يستورد ديناميكيًا وحدة Widget من RemoteApp. يتوافق اسم RemoteApp مع الاسم المحدد في قسم remotes من تكوين Webpack الخاص بالمضيف. ويتوافق Widget مع اسم الوحدة المحدد في قسم exposes من تكوين Webpack الخاص بالتطبيق البعيد.
• React.Suspense: يستخدم هذا للتعامل مع التحميل غير المتزامن للوحدة البعيدة. يحدد خاصية fallback مكونًا لعرضه أثناء تحميل الوحدة.

6. تشغيل التطبيقات:

ابدأ تشغيل كل من التطبيق المضيف والتطبيق البعيد باستخدام npm start (أو طريقتك المفضلة). تأكد من تشغيل التطبيق البعيد *قبل* التطبيق المضيف.

يجب أن ترى الآن الأداة (widget) البعيدة معروضة داخل التطبيق المضيف.

تقنيات اتحاد الوحدات المتقدمة

بالإضافة إلى الإعداد الأساسي، يقدم اتحاد الوحدات العديد من التقنيات المتقدمة لبناء بنى واجهات أمامية مصغرة متطورة.

1. إدارة الإصدارات والمشاركة:

تعتبر معالجة الاعتماديات المشتركة بفعالية أمرًا حاسمًا للحفاظ على الاستقرار وتجنب التعارضات. يوفر اتحاد الوحدات آليات لتحديد نطاقات الإصدارات والنسخ الفردية (singleton) للوحدات المشتركة. يتيح لك استخدام خاصية shared في تكوين Webpack التحكم في كيفية تحميل وإدارة الوحدات المشتركة.

مثال:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: يضمن تحميل نسخة واحدة فقط من الوحدة، مما يمنع التكرار ويقلل من حجم الحزمة. هذا مهم بشكل خاص لمكتبات مثل React و ReactDOM.
• requiredVersion: يحدد نطاق الإصدار الذي يتطلبه التطبيق. سيحاول Webpack تحميل إصدار متوافق من الوحدة.
• eager: true: يقوم بتحميل الوحدة على الفور، بدلاً من التحميل الكسول. يمكن أن يحسن هذا الأداء في بعض الحالات، ولكنه قد يزيد أيضًا من حجم الحزمة الأولية.

2. اتحاد الوحدات الديناميكي:

بدلاً من ترميز عناوين URL للتطبيقات البعيدة بشكل ثابت، يمكنك تحميلها ديناميكيًا من ملف تكوين أو نقطة نهاية API. يتيح لك هذا تحديث بنية الواجهة الأمامية المصغرة دون إعادة نشر التطبيق المضيف.

مثال:

قم بإنشاء ملف تكوين (على سبيل المثال، remote-config.json) يحتوي على عناوين URL للتطبيقات البعيدة:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

في التطبيق المضيف، قم بجلب ملف التكوين وإنشاء كائن remotes ديناميكيًا:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

ملاحظة هامة: فكر في استخدام طريقة أكثر قوة لجلب التكوين البعيد في بيئة الإنتاج، مثل نقطة نهاية API أو خدمة تكوين مخصصة. يستخدم المثال أعلاه fs.readFile للتبسيط، ولكنه غير مناسب بشكل عام لعمليات النشر في بيئة الإنتاج.

3. استراتيجيات التحميل المخصصة:

يسمح لك اتحاد الوحدات بتخصيص كيفية تحميل الوحدات البعيدة. يمكنك تنفيذ استراتيجيات تحميل مخصصة لتحسين الأداء أو التعامل مع سيناريوهات محددة، مثل تحميل الوحدات من شبكة توصيل المحتوى (CDN) أو استخدام عامل خدمة (service worker).

يعرض Webpack خطافات (hooks) تسمح لك باعتراض وتعديل عملية تحميل الوحدة. وهذا يتيح التحكم الدقيق في كيفية جلب الوحدات البعيدة وتهيئتها.

4. التعامل مع CSS والأنماط:

يمكن أن تكون مشاركة CSS والأنماط بين الواجهات الأمامية المصغرة صعبة. يدعم اتحاد الوحدات مناهج مختلفة للتعامل مع الأنماط، بما في ذلك:

• وحدات CSS (CSS Modules): استخدم وحدات CSS لتغليف الأنماط داخل كل واجهة أمامية مصغرة، مما يمنع التعارضات ويضمن الاتساق.
• المكونات المنمّطة (Styled Components): استخدم المكونات المنمّطة أو مكتبات CSS-in-JS الأخرى لإدارة الأنماط داخل المكونات نفسها.
• الأنماط العامة (Global Styles): قم بتحميل الأنماط العامة من مكتبة مشتركة أو شبكة توصيل المحتوى. كن حذرًا مع هذا النهج، حيث يمكن أن يؤدي إلى تعارضات إذا لم يتم تحديد نطاق أسماء الأنماط بشكل صحيح.

مثال باستخدام وحدات CSS:

قم بتكوين Webpack لاستخدام وحدات CSS:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

استورد وحدات CSS في مكوناتك:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. التواصل بين الواجهات الأمامية المصغرة:

غالبًا ما تحتاج الواجهات الأمامية المصغرة إلى التواصل مع بعضها البعض لتبادل البيانات أو إطلاق الإجراءات. هناك عدة طرق لتحقيق ذلك:

• الأحداث المشتركة (Shared Events): استخدم ناقل أحداث عالمي (global event bus) لنشر الأحداث والاشتراك فيها. يتيح هذا للواجهات الأمامية المصغرة التواصل بشكل غير متزامن دون اعتماديات مباشرة.
• الأحداث المخصصة (Custom Events): استخدم أحداث DOM المخصصة للتواصل بين الواجهات الأمامية المصغرة داخل نفس الصفحة.
• إدارة الحالة المشتركة (Shared State Management): استخدم مكتبة إدارة حالة مشتركة (مثل Redux، Zustand) لمركزية الحالة وتسهيل مشاركة البيانات.
• الاستيراد المباشر للوحدات (Direct Module Imports): إذا كانت الواجهات الأمامية المصغرة مرتبطة بشكل وثيق، يمكنك استيراد الوحدات مباشرة من بعضها البعض باستخدام اتحاد الوحدات. ومع ذلك، يجب استخدام هذا النهج باعتدال لتجنب إنشاء اعتماديات تقوض فوائد الواجهات الأمامية المصغرة.
• واجهات برمجة التطبيقات والخدمات (APIs and Services): يمكن للواجهات الأمامية المصغرة التواصل مع بعضها البعض من خلال واجهات برمجة التطبيقات والخدمات، مما يسمح بالاقتران الضعيف ومرونة أكبر. هذا مفيد بشكل خاص عندما يتم نشر الواجهات الأمامية المصغرة على نطاقات مختلفة أو لها متطلبات أمان مختلفة.

فوائد استخدام اتحاد الوحدات للواجهات الأمامية المصغرة

• تحسين قابلية التوسع: يمكن توسيع الواجهات الأمامية المصغرة بشكل مستقل، مما يتيح لك تخصيص الموارد حيث تشتد الحاجة إليها.
• زيادة قابلية الصيانة: قواعد التعليمات البرمجية الأصغر أسهل في الفهم والصيانة، مما يقلل من مخاطر الأخطاء ويحسن إنتاجية المطورين.
• دورات نشر أسرع: يمكن نشر الواجهات الأمامية المصغرة بشكل مستقل، مما يسمح بدورات تكرار أسرع وإصدار أسرع للميزات الجديدة.
• التنوع التكنولوجي: يمكن للفرق اختيار التقنيات وأطر العمل التي تناسب احتياجاتهم على أفضل وجه، مما يعزز الابتكار ويسمح باستخدام المهارات المتخصصة.
• تعزيز استقلالية الفريق: كل واجهة أمامية مصغرة مملوكة لفريق مخصص، مما يعزز الملكية والمساءلة.
• تبسيط عملية الإعداد: يمكن للمطورين الجدد التعرف بسرعة على قواعد التعليمات البرمجية الأصغر والأكثر قابلية للإدارة.

تحديات استخدام اتحاد الوحدات

• زيادة التعقيد: يمكن أن تكون بنى الواجهات الأمامية المصغرة أكثر تعقيدًا من البنى المتجانسة التقليدية، مما يتطلب تخطيطًا وتنسيقًا دقيقين.
• إدارة الاعتماديات المشتركة: قد تكون إدارة الاعتماديات المشتركة صعبة، خاصة عندما تستخدم واجهات أمامية مصغرة مختلفة إصدارات مختلفة من نفس المكتبة.
• عبء التواصل: يمكن أن يؤدي التواصل بين الواجهات الأمامية المصغرة إلى عبء إضافي وزمن انتقال.
• اختبار التكامل: يمكن أن يكون اختبار تكامل الواجهات الأمامية المصغرة أكثر تعقيدًا من اختبار تطبيق متجانس.
• عبء الإعداد الأولي: يمكن أن يتطلب تكوين اتحاد الوحدات وإعداد البنية التحتية الأولية جهدًا كبيرًا.

أمثلة واقعية وحالات استخدام

يتم استخدام اتحاد الوحدات من قبل عدد متزايد من الشركات لبناء تطبيقات ويب كبيرة ومعقدة. إليك بعض الأمثلة الواقعية وحالات الاستخدام:

• منصات التجارة الإلكترونية: غالبًا ما تستخدم منصات التجارة الإلكترونية الكبيرة الواجهات الأمامية المصغرة لإدارة أجزاء مختلفة من الموقع، مثل كتالوج المنتجات وعربة التسوق وعملية الدفع. على سبيل المثال، قد يستخدم بائع تجزئة ألماني واجهة أمامية مصغرة منفصلة لعرض المنتجات باللغة الألمانية، بينما يستخدم بائع تجزئة فرنسي واجهة أمامية مصغرة مختلفة للمنتجات الفرنسية، وكلاهما مدمج في تطبيق مضيف واحد.
• المؤسسات المالية: تستخدم البنوك والمؤسسات المالية الواجهات الأمامية المصغرة لبناء تطبيقات مصرفية معقدة، مثل بوابات الخدمات المصرفية عبر الإنترنت ومنصات الاستثمار وأنظمة التداول. قد يكون لدى بنك عالمي فرق في بلدان مختلفة تطور واجهات أمامية مصغرة لمناطق مختلفة، كل منها مصمم خصيصًا للوائح المحلية وتفضيلات العملاء.
• أنظمة إدارة المحتوى (CMS): يمكن لمنصات أنظمة إدارة المحتوى استخدام الواجهات الأمامية المصغرة للسماح للمستخدمين بتخصيص مظهر ووظائف مواقعهم الإلكترونية. على سبيل المثال، قد تسمح شركة كندية تقدم خدمات CMS للمستخدمين بإضافة أو إزالة واجهات أمامية مصغرة مختلفة (أدوات) إلى موقعهم لتخصيص وظائفه.
• لوحات المعلومات ومنصات التحليلات: تعتبر الواجهات الأمامية المصغرة مناسبة تمامًا لبناء لوحات المعلومات ومنصات التحليلات، حيث يمكن لفرق مختلفة المساهمة بأدوات وتصورات مختلفة.
• تطبيقات الرعاية الصحية: يستخدم مقدمو الرعاية الصحية الواجهات الأمامية المصغرة لبناء بوابات المرضى وأنظمة السجلات الصحية الإلكترونية (EHR) ومنصات الطب عن بعد.

أفضل الممارسات لتنفيذ اتحاد الوحدات

لضمان نجاح تنفيذ اتحاد الوحدات الخاص بك، اتبع أفضل الممارسات التالية:

• خطط بعناية: قبل أن تبدأ، خطط بعناية لبنية الواجهة الأمامية المصغرة وحدد حدودًا واضحة بين التطبيقات المختلفة.
• أنشئ قنوات اتصال واضحة: أنشئ قنوات اتصال واضحة بين الفرق المسؤولة عن الواجهات الأمامية المصغرة المختلفة.
• أتمتة النشر: أتمتة عملية النشر لضمان إمكانية نشر الواجهات الأمامية المصغرة بسرعة وموثوقية.
• راقب الأداء: راقب أداء بنية الواجهة الأمامية المصغرة لتحديد ومعالجة أي اختناقات.
• نفذ معالجة قوية للأخطاء: نفذ معالجة قوية للأخطاء لمنع حالات الفشل المتتالية وضمان بقاء التطبيق مرنًا.
• استخدم أسلوب ترميز متسق: فرض أسلوب ترميز متسق عبر جميع الواجهات الأمامية المصغرة لتحسين قابلية الصيانة.
• وثق كل شيء: وثق بنيتك واعتمادياتك وبروتوكولات الاتصال لضمان فهم النظام جيدًا وقابليته للصيانة.
• ضع في اعتبارك الآثار الأمنية: ضع في اعتبارك بعناية الآثار الأمنية لبنية الواجهة الأمامية المصغرة الخاصة بك ونفذ التدابير الأمنية المناسبة. تأكد من الالتزام بلوائح خصوصية البيانات العالمية مثل GDPR و CCPA.

الخاتمة

يوفر اتحاد وحدات جافاسكريبت مع Webpack 5 طريقة قوية ومرنة لبناء بنى الواجهات الأمامية المصغرة. من خلال تقسيم التطبيقات الكبيرة إلى وحدات أصغر قابلة للنشر بشكل مستقل، يمكنك تحسين قابلية التوسع والصيانة واستقلالية الفريق. في حين أن هناك تحديات مرتبطة بتنفيذ الواجهات الأمامية المصغرة، فإن الفوائد غالبًا ما تفوق التكاليف، خاصة بالنسبة لتطبيقات الويب المعقدة. باتباع أفضل الممارسات الموضحة في هذا الدليل، يمكنك الاستفادة بنجاح من اتحاد الوحدات لبناء بنى واجهات أمامية مصغرة قوية وقابلة للتطوير تلبي احتياجات مؤسستك والمستخدمين في جميع أنحاء العالم.