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')): यह RemoteApp से Widget मॉड्यूल को गतिशील रूप से इम्पोर्ट करता है। RemoteApp नाम होस्ट के वेबपैक कॉन्फ़िगरेशन के remotes सेक्शन में परिभाषित नाम से मेल खाता है। Widget रिमोट के वेबपैक कॉन्फ़िगरेशन के exposes सेक्शन में परिभाषित मॉड्यूल नाम से मेल खाता है।
• React.Suspense: इसका उपयोग रिमोट मॉड्यूल के एसिंक्रोनस लोडिंग को संभालने के लिए किया जाता है। fallback प्रॉप एक कंपोनेंट निर्दिष्ट करता है जिसे मॉड्यूल लोड होने के दौरान रेंडर किया जाएगा।

6. एप्लिकेशन चलाएँ:

npm start (या अपनी पसंदीदा विधि) का उपयोग करके होस्ट और रिमोट दोनों एप्लिकेशन शुरू करें। सुनिश्चित करें कि रिमोट एप्लिकेशन होस्ट एप्लिकेशन से *पहले* चल रहा है।

अब आपको होस्ट एप्लिकेशन के भीतर रिमोट विजेट रेंडर किया हुआ दिखना चाहिए।

उन्नत मॉड्यूल फेडरेशन तकनीकें

बुनियादी सेटअप के अलावा, मॉड्यूल फेडरेशन परिष्कृत माइक्रो-फ्रंटएंड आर्किटेक्चर बनाने के लिए कई उन्नत तकनीकें प्रदान करता है।

1. संस्करण प्रबंधन और साझाकरण:

स्थिरता बनाए रखने और टकराव से बचने के लिए साझा निर्भरता को प्रभावी ढंग से संभालना महत्वपूर्ण है। मॉड्यूल फेडरेशन साझा मॉड्यूल के संस्करण श्रेणियों और सिंगलटन इंस्टेंस को निर्दिष्ट करने के लिए तंत्र प्रदान करता है। वेबपैक कॉन्फ़िगरेशन में shared प्रॉपर्टी का उपयोग करने से आप यह नियंत्रित कर सकते हैं कि साझा मॉड्यूल कैसे लोड और प्रबंधित किए जाते हैं।

उदाहरण:

            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: उस संस्करण श्रेणी को निर्दिष्ट करता है जिसकी एप्लिकेशन को आवश्यकता है। वेबपैक मॉड्यूल का एक संगत संस्करण लोड करने का प्रयास करेगा।
• 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 से मॉड्यूल लोड करना या सर्विस वर्कर का उपयोग करना।

वेबपैक हुक एक्सपोज़ करता है जो आपको मॉड्यूल लोडिंग प्रक्रिया को बाधित करने और संशोधित करने की अनुमति देता है। यह इस पर बारीक नियंत्रण सक्षम करता है कि रिमोट मॉड्यूल कैसे प्राप्त और प्रारंभ किए जाते हैं।

4. CSS और स्टाइल को संभालना:

माइक्रो-फ्रंटएंड के बीच CSS और स्टाइल साझा करना मुश्किल हो सकता है। मॉड्यूल फेडरेशन स्टाइल को संभालने के लिए विभिन्न दृष्टिकोणों का समर्थन करता है, जिनमें शामिल हैं:

• CSS मॉड्यूल: प्रत्येक माइक्रो-फ्रंटएंड के भीतर स्टाइल को एनकैप्सुलेट करने, टकराव को रोकने और स्थिरता सुनिश्चित करने के लिए CSS मॉड्यूल का उपयोग करें।
• स्टाइल-कंपोनेंट्स (Styled Components): कंपोनेंट्स के भीतर ही स्टाइल को प्रबंधित करने के लिए स्टाइल-कंपोनेंट्स या अन्य CSS-in-JS लाइब्रेरियों का उपयोग करें।
• ग्लोबल स्टाइल्स: एक साझा लाइब्रेरी या CDN से ग्लोबल स्टाइल लोड करें। इस दृष्टिकोण से सावधान रहें, क्योंकि यदि स्टाइल को ठीक से नेमस्पेस नहीं किया गया है तो यह टकराव का कारण बन सकता है।

CSS मॉड्यूल का उपयोग करके उदाहरण:

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. माइक्रो-फ्रंटएंड के बीच संचार:

माइक्रो-फ्रंटएंड को अक्सर डेटा का आदान-प्रदान करने या क्रियाओं को ट्रिगर करने के लिए एक-दूसरे के साथ संवाद करने की आवश्यकता होती है। इसे प्राप्त करने के कई तरीके हैं:

• साझा इवेंट्स: इवेंट्स को प्रकाशित करने और सब्सक्राइब करने के लिए एक ग्लोबल इवेंट बस का उपयोग करें। यह माइक्रो-फ्रंटएंड को सीधी निर्भरता के बिना एसिंक्रोनस रूप से संवाद करने की अनुमति देता है।
• कस्टम इवेंट्स: एक ही पेज के भीतर माइक्रो-फ्रंटएंड के बीच संचार के लिए कस्टम DOM इवेंट्स का उपयोग करें।
• साझा राज्य प्रबंधन: स्थिति को केंद्रीकृत करने और डेटा साझा करने की सुविधा के लिए एक साझा राज्य प्रबंधन लाइब्रेरी (जैसे, Redux, Zustand) का उपयोग करें।
• प्रत्यक्ष मॉड्यूल आयात: यदि माइक्रो-फ्रंटएंड कसकर जुड़े हुए हैं, तो आप मॉड्यूल फेडरेशन का उपयोग करके एक-दूसरे से सीधे मॉड्यूल आयात कर सकते हैं। हालांकि, इस दृष्टिकोण का उपयोग संयम से किया जाना चाहिए ताकि ऐसी निर्भरताएँ न बनें जो माइक्रो-फ्रंटएंड के लाभों को कम करती हैं।
• APIs और सेवाएँ: माइक्रो-फ्रंटएंड APIs और सेवाओं के माध्यम से एक-दूसरे के साथ संवाद कर सकते हैं, जिससे ढीले युग्मन और अधिक लचीलेपन की अनुमति मिलती है। यह विशेष रूप से तब उपयोगी होता है जब माइक्रो-फ्रंटएंड विभिन्न डोमेन पर तैनात होते हैं या उनकी अलग-अलग सुरक्षा आवश्यकताएं होती हैं।

माइक्रो-फ्रंटएंड के लिए मॉड्यूल फेडरेशन का उपयोग करने के लाभ

• बेहतर स्केलेबिलिटी: माइक्रो-फ्रंटएंड को स्वतंत्र रूप से स्केल किया जा सकता है, जिससे आप संसाधनों को वहां आवंटित कर सकते हैं जहां उनकी सबसे अधिक आवश्यकता होती है।
• बढ़ी हुई रखरखाव क्षमता: छोटे कोडबेस को समझना और बनाए रखना आसान होता है, जिससे बग का खतरा कम होता है और डेवलपर उत्पादकता में सुधार होता है।
• तेज डिप्लॉयमेंट चक्र: माइक्रो-फ्रंटएंड को स्वतंत्र रूप से डिप्लॉय किया जा सकता है, जिससे तेज पुनरावृत्ति चक्र और नई सुविधाओं की त्वरित रिलीज की अनुमति मिलती है।
• तकनीकी विविधता: टीमें उन तकनीकों और फ्रेमवर्क को चुन सकती हैं जो उनकी जरूरतों के लिए सबसे उपयुक्त हों, जिससे नवाचार को बढ़ावा मिलता है और विशेष कौशल के उपयोग की अनुमति मिलती है।
• बढ़ी हुई टीम स्वायत्तता: प्रत्येक माइक्रो-फ्रंटएंड एक समर्पित टीम के स्वामित्व में होता है, जो स्वामित्व और जवाबदेही को बढ़ावा देता है।
• सरल ऑनबोर्डिंग: नए डेवलपर छोटे, अधिक प्रबंधनीय कोडबेस पर जल्दी से काम शुरू कर सकते हैं।

मॉड्यूल फेडरेशन का उपयोग करने की चुनौतियाँ

• बढ़ी हुई जटिलता: माइक्रो-फ्रंटएंड आर्किटेक्चर पारंपरिक मोनोलिथिक आर्किटेक्चर की तुलना में अधिक जटिल हो सकते हैं, जिसके लिए सावधानीपूर्वक योजना और समन्वय की आवश्यकता होती है।
• साझा निर्भरता प्रबंधन: साझा निर्भरता का प्रबंधन करना चुनौतीपूर्ण हो सकता है, खासकर जब विभिन्न माइक्रो-फ्रंटएंड एक ही लाइब्रेरी के विभिन्न संस्करणों का उपयोग करते हैं।
• संचार ओवरहेड: माइक्रो-फ्रंटएंड के बीच संचार ओवरहेड और विलंबता ला सकता है।
• एकीकरण परीक्षण: माइक्रो-फ्रंटएंड के एकीकरण का परीक्षण एक मोनोलिथिक एप्लिकेशन के परीक्षण की तुलना में अधिक जटिल हो सकता है।
• प्रारंभिक सेटअप ओवरहेड: मॉड्यूल फेडरेशन को कॉन्फ़िगर करने और प्रारंभिक बुनियादी ढांचे को स्थापित करने में महत्वपूर्ण प्रयास की आवश्यकता हो सकती है।

वास्तविक-विश्व उदाहरण और उपयोग के मामले

मॉड्यूल फेडरेशन का उपयोग बड़ी, जटिल वेब एप्लिकेशन बनाने के लिए बढ़ती संख्या में कंपनियों द्वारा किया जा रहा है। यहाँ कुछ वास्तविक-विश्व उदाहरण और उपयोग के मामले दिए गए हैं:

• ई-कॉमर्स प्लेटफॉर्म: बड़े ई-कॉमर्स प्लेटफॉर्म अक्सर वेबसाइट के विभिन्न हिस्सों, जैसे उत्पाद कैटलॉग, शॉपिंग कार्ट और चेकआउट प्रक्रिया को प्रबंधित करने के लिए माइक्रो-फ्रंटएंड का उपयोग करते हैं। उदाहरण के लिए, एक जर्मन रिटेलर जर्मन में उत्पादों को प्रदर्शित करने के लिए एक अलग माइक्रो-फ्रंटएंड का उपयोग कर सकता है, जबकि एक फ्रांसीसी रिटेलर फ्रांसीसी उत्पादों के लिए एक अलग माइक्रो-फ्रंटएंड का उपयोग करता है, दोनों एक ही होस्ट एप्लिकेशन में एकीकृत होते हैं।
• वित्तीय संस्थान: बैंक और वित्तीय संस्थान जटिल बैंकिंग एप्लिकेशन, जैसे ऑनलाइन बैंकिंग पोर्टल, निवेश प्लेटफॉर्म और ट्रेडिंग सिस्टम बनाने के लिए माइक्रो-फ्रंटएंड का उपयोग करते हैं। एक वैश्विक बैंक के पास विभिन्न देशों में विभिन्न क्षेत्रों के लिए माइक्रो-फ्रंटएंड विकसित करने वाली टीमें हो सकती हैं, प्रत्येक स्थानीय नियमों और ग्राहकों की प्राथमिकताओं के अनुरूप।
• कंटेंट मैनेजमेंट सिस्टम (CMS): CMS प्लेटफॉर्म उपयोगकर्ताओं को अपनी वेबसाइटों की उपस्थिति और कार्यक्षमता को अनुकूलित करने की अनुमति देने के लिए माइक्रो-फ्रंटएंड का उपयोग कर सकते हैं। उदाहरण के लिए, CMS सेवाएं प्रदान करने वाली एक कनाडाई कंपनी उपयोगकर्ताओं को अपनी वेबसाइट की कार्यक्षमता को अनुकूलित करने के लिए विभिन्न माइक्रो-फ्रंटएंड (विजेट) जोड़ने या हटाने की अनुमति दे सकती है।
• डैशबोर्ड और एनालिटिक्स प्लेटफॉर्म: माइक्रो-फ्रंटएंड डैशबोर्ड और एनालिटिक्स प्लेटफॉर्म बनाने के लिए अच्छी तरह से अनुकूल हैं, जहां विभिन्न टीमें विभिन्न विजेट और विज़ुअलाइज़ेशन का योगदान कर सकती हैं।
• स्वास्थ्य सेवा एप्लिकेशन: स्वास्थ्य सेवा प्रदाता रोगी पोर्टल, इलेक्ट्रॉनिक स्वास्थ्य रिकॉर्ड (EHR) सिस्टम और टेलीमेडिसिन प्लेटफॉर्म बनाने के लिए माइक्रो-फ्रंटएंड का उपयोग करते हैं।

मॉड्यूल फेडरेशन को लागू करने के लिए सर्वोत्तम प्रथाएं

अपने मॉड्यूल फेडरेशन कार्यान्वयन की सफलता सुनिश्चित करने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

• सावधानीपूर्वक योजना बनाएं: शुरू करने से पहले, अपने माइक्रो-फ्रंटएंड आर्किटेक्चर की सावधानीपूर्वक योजना बनाएं और विभिन्न एप्लिकेशनों के बीच स्पष्ट सीमाएं परिभाषित करें।
• स्पष्ट संचार चैनल स्थापित करें: विभिन्न माइक्रो-फ्रंटएंड के लिए जिम्मेदार टीमों के बीच स्पष्ट संचार चैनल स्थापित करें।
• डिप्लॉयमेंट को स्वचालित करें: यह सुनिश्चित करने के लिए डिप्लॉयमेंट प्रक्रिया को स्वचालित करें कि माइक्रो-फ्रंटएंड को जल्दी और मज़बूती से डिप्लॉय किया जा सके।
• प्रदर्शन की निगरानी करें: किसी भी बाधा की पहचान करने और उसे दूर करने के लिए अपने माइक्रो-फ्रंटएंड आर्किटेक्चर के प्रदर्शन की निगरानी करें।
• मजबूत त्रुटि हैंडलिंग लागू करें: कैस्केडिंग विफलताओं को रोकने और यह सुनिश्चित करने के लिए कि एप्लिकेशन लचीला बना रहे, मजबूत त्रुटि हैंडलिंग लागू करें।
• एक सुसंगत कोड शैली का उपयोग करें: रखरखाव में सुधार के लिए सभी माइक्रो-फ्रंटएंड में एक सुसंगत कोड शैली लागू करें।
• सब कुछ दस्तावेज़ करें: यह सुनिश्चित करने के लिए कि सिस्टम अच्छी तरह से समझा और रखरखाव योग्य है, अपने आर्किटेक्चर, निर्भरता और संचार प्रोटोकॉल का दस्तावेजीकरण करें।
• सुरक्षा निहितार्थों पर विचार करें: अपने माइक्रो-फ्रंटएंड आर्किटेक्चर के सुरक्षा निहितार्थों पर सावधानीपूर्वक विचार करें और उपयुक्त सुरक्षा उपाय लागू करें। GDPR और CCPA जैसे वैश्विक डेटा गोपनीयता नियमों का पालन सुनिश्चित करें।

निष्कर्ष

वेबपैक 5 के साथ जावास्क्रिप्ट मॉड्यूल फेडरेशन माइक्रो-फ्रंटएंड आर्किटेक्चर बनाने का एक शक्तिशाली और लचीला तरीका प्रदान करता है। बड़े एप्लिकेशनों को छोटे, स्वतंत्र रूप से डिप्लॉय करने योग्य इकाइयों में तोड़कर, आप स्केलेबिलिटी, रखरखाव क्षमता और टीम स्वायत्तता में सुधार कर सकते हैं। हालांकि माइक्रो-फ्रंटएंड को लागू करने से जुड़ी चुनौतियाँ हैं, लेकिन लाभ अक्सर लागतों से अधिक होते हैं, खासकर जटिल वेब एप्लिकेशनों के लिए। इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप अपनी संगठन और दुनिया भर के उपयोगकर्ताओं की जरूरतों को पूरा करने वाले मजबूत और स्केलेबल माइक्रो-फ्रंटएंड आर्किटेक्चर बनाने के लिए मॉड्यूल फेडरेशन का सफलतापूर्वक लाभ उठा सकते हैं।