జావాస్క్రిప్ట్ మాడ్యూల్ ఫెడరేషన్ యొక్క రన్‌టైమ్ షేరింగ్ సామర్థ్యాలు, స్కేలబుల్, మెయింటెనబుల్, మరియు సహకార గ్లోబల్ అప్లికేషన్‌లను రూపొందించడంలో దాని ప్రయోజనాలు, మరియు ఆచరణాత్మక అమలు వ్యూహాలను అన్వేషించండి.
జావాస్క్రిప్ట్ మాడ్యూల్ ఫెడరేషన్: గ్లోబల్ అప్లికేషన్‌ల కోసం రన్‌టైమ్ షేరింగ్ శక్తిని అన్‌లాక్ చేయడం
నేటి వేగంగా అభివృద్ధి చెందుతున్న డిజిటల్ ప్రపంచంలో, స్కేలబుల్, మెయింటెనబుల్, మరియు సహకార వెబ్ అప్లికేషన్‌లను రూపొందించడం అత్యంత ముఖ్యం. డెవలప్‌మెంట్ బృందాలు పెరిగి, అప్లికేషన్‌లు మరింత సంక్లిష్టంగా మారడంతో, సమర్థవంతమైన కోడ్ షేరింగ్ మరియు డీకప్లింగ్ ఆవశ్యకత మరింత కీలకంగా మారుతుంది. వెబ్‌ప్యాక్ 5 తో పరిచయం చేయబడిన ఒక అద్భుతమైన ఫీచర్ అయిన జావాస్క్రిప్ట్ మాడ్యూల్ ఫెడరేషన్, స్వతంత్రంగా అమలు చేయబడిన అప్లికేషన్‌ల మధ్య కోడ్‌ను రన్‌టైమ్‌లో పంచుకోవడానికి వీలు కల్పించడం ద్వారా ఒక శక్తివంతమైన పరిష్కారాన్ని అందిస్తుంది. ఈ బ్లాగ్ పోస్ట్ మాడ్యూల్ ఫెడరేషన్ యొక్క ప్రధాన భావనలను, దాని రన్‌టైమ్ షేరింగ్ సామర్థ్యాలపై దృష్టి సారిస్తూ విశ్లేషిస్తుంది, మరియు గ్లోబల్ బృందాలు తమ వెబ్ అప్లికేషన్‌లను ఎలా నిర్మించి, నిర్వహిస్తాయో విప్లవాత్మకంగా ఎలా మార్చగలదో అన్వేషిస్తుంది.
వెబ్ డెవలప్‌మెంట్ యొక్క మారుతున్న దృశ్యం మరియు షేరింగ్ ఆవశ్యకత
చారిత్రాత్మకంగా, వెబ్ డెవలప్‌మెంట్‌లో తరచుగా మోనోలిథిక్ అప్లికేషన్‌లు ఉండేవి, ఇక్కడ మొత్తం కోడ్ ఒకే కోడ్‌బేస్‌లో ఉండేది. చిన్న ప్రాజెక్ట్‌లకు ఈ విధానం అనుకూలంగా ఉన్నప్పటికీ, అప్లికేషన్‌లు స్కేల్ అయ్యే కొద్దీ ఇది త్వరగా గజిబిజిగా మారుతుంది. డిపెండెన్సీలు చిక్కుకుపోతాయి, బిల్డ్ సమయాలు పెరుగుతాయి, మరియు అప్‌డేట్‌లను అమలు చేయడం సంక్లిష్టమైన మరియు ప్రమాదకరమైన పనిగా మారుతుంది. బ్యాకెండ్ డెవలప్‌మెంట్‌లో మైక్రోసర్వీసుల పెరుగుదల ఫ్రంటెండ్‌లో ఇలాంటి ఆర్కిటెక్చరల్ పద్ధతులకు మార్గం సుగమం చేసింది, ఇది మైక్రోఫ్రంటెండ్స్ ఆవిర్భావానికి దారితీసింది.
మైక్రోఫ్రంటెండ్స్ పెద్ద, సంక్లిష్టమైన ఫ్రంటెండ్ అప్లికేషన్‌లను చిన్న, స్వతంత్ర, మరియు అమలు చేయగల యూనిట్‌లుగా విభజించాలని లక్ష్యంగా పెట్టుకున్నాయి. ఇది వేర్వేరు బృందాలు అప్లికేషన్ యొక్క వేర్వేరు భాగాలపై స్వయంప్రతిపత్తితో పనిచేయడానికి అనుమతిస్తుంది, ఇది వేగవంతమైన డెవలప్‌మెంట్ సైకిల్స్ మరియు మెరుగైన టీమ్ స్వయంప్రతిపత్తికి దారితీస్తుంది. అయినప్పటికీ, మైక్రోఫ్రంటెండ్ ఆర్కిటెక్చర్‌లలో ఒక ముఖ్యమైన సవాలు సమర్థవంతమైన కోడ్ షేరింగ్. సాధారణ లైబ్రరీలు, UI కాంపోనెంట్‌లు, లేదా యుటిలిటీ ఫంక్షన్‌లను బహుళ మైక్రోఫ్రంటెండ్‌లలో నకిలీ చేయడం వల్ల ఇవి జరుగుతాయి:
- పెరిగిన బండిల్ పరిమాణాలు: ప్రతి అప్లికేషన్ షేర్డ్ డిపెండెన్సీల యొక్క సొంత కాపీని కలిగి ఉంటుంది, ఇది వినియోగదారుల కోసం మొత్తం డౌన్‌లోడ్ పరిమాణాన్ని పెంచుతుంది.
- అస్థిరమైన డిపెండెన్సీలు: వేర్వేరు మైక్రోఫ్రంటెండ్‌లు ఒకే లైబ్రరీ యొక్క వేర్వేరు వెర్షన్‌లను ఉపయోగించవచ్చు, ఇది అనుకూలత సమస్యలకు మరియు ఊహించలేని ప్రవర్తనకు దారితీస్తుంది.
- నిర్వహణ భారం: షేర్డ్ కోడ్‌ను అప్‌డేట్ చేయడానికి బహుళ అప్లికేషన్‌లలో మార్పులు అవసరం, ఇది లోపాల ప్రమాదాన్ని పెంచుతుంది మరియు అమలును నెమ్మదిస్తుంది.
- వృధా అయిన వనరులు: ఒకే కోడ్‌ను చాలాసార్లు డౌన్‌లోడ్ చేయడం క్లయింట్ మరియు సర్వర్ రెండింటికీ అసమర్థమైనది.
మాడ్యూల్ ఫెడరేషన్ రన్‌టైమ్‌లో కోడ్‌ను నిజంగా పంచుకోవడానికి ఒక యంత్రాంగాన్ని పరిచయం చేయడం ద్వారా ఈ సవాళ్లను నేరుగా పరిష్కరిస్తుంది.
జావాస్క్రిప్ట్ మాడ్యూల్ ఫెడరేషన్ అంటే ఏమిటి?
జావాస్క్రిప్ట్ మాడ్యూల్ ఫెడరేషన్, ప్రధానంగా వెబ్‌ప్యాక్ 5 ద్వారా అమలు చేయబడినది, ఇది ఒక బిల్డ్ టూల్ ఫీచర్. ఇది జావాస్క్రిప్ట్ అప్లికేషన్‌లు రన్‌టైమ్‌లో ఇతర అప్లికేషన్‌ల నుండి కోడ్‌ను డైనమిక్‌గా లోడ్ చేయడానికి అనుమతిస్తుంది. ఇది ఒక మోనోరెపో లేదా సంక్లిష్టమైన బిల్డ్-టైమ్ ఇంటిగ్రేషన్ ప్రక్రియ అవసరం లేకుండా, కోడ్ మరియు డిపెండెన్సీలను పంచుకోగల బహుళ స్వతంత్ర అప్లికేషన్‌లను సృష్టించడానికి వీలు కల్పిస్తుంది.
ఇందులో ప్రధాన ఆలోచన "రిమోట్‌లు" (మాడ్యూల్స్‌ను బహిర్గతం చేసే అప్లికేషన్‌లు) మరియు "హోస్ట్‌లు" (రిమోట్‌ల నుండి మాడ్యూల్స్‌ను వినియోగించుకునే అప్లికేషన్‌లు) ను నిర్వచించడం. ఈ రిమోట్‌లు మరియు హోస్ట్‌లను స్వతంత్రంగా అమలు చేయవచ్చు, ఇది సంక్లిష్టమైన అప్లికేషన్‌లను నిర్వహించడంలో గణనీయమైన సౌలభ్యాన్ని అందిస్తుంది మరియు విభిన్న ఆర్కిటెక్చరల్ పద్ధతులను ప్రారంభిస్తుంది.
రన్‌టైమ్ షేరింగ్‌ను అర్థం చేసుకోవడం: మాడ్యూల్ ఫెడరేషన్ యొక్క ప్రధానాంశం
రన్‌టైమ్ షేరింగ్ అనేది మాడ్యూల్ ఫెడరేషన్ యొక్క శక్తికి మూలస్తంభం. సాంప్రదాయ కోడ్-స్ప్లిటింగ్ లేదా షేర్డ్ డిపెండెన్సీ నిర్వహణ పద్ధతులు తరచుగా బిల్డ్ సమయంలో జరుగుతాయి, కానీ వాటికి భిన్నంగా, మాడ్యూల్ ఫెడరేషన్ అప్లికేషన్‌లు ఇతర అప్లికేషన్‌ల నుండి మాడ్యూల్స్‌ను నేరుగా యూజర్ బ్రౌజర్‌లో కనుగొని లోడ్ చేయడానికి అనుమతిస్తుంది. దీని అర్థం ఒక సాధారణ లైబ్రరీ, ఒక షేర్డ్ UI కాంపోనెంట్ లైబ్రరీ, లేదా ఒక ఫీచర్ మాడ్యూల్ కూడా ఒక అప్లికేషన్ ద్వారా ఒకసారి లోడ్ చేయబడి, ఆపై అవసరమైన ఇతర అప్లికేషన్‌లకు అందుబాటులో ఉంటుంది.
ఇది ఎలా పనిచేస్తుందో విడదీసి చూద్దాం:
ముఖ్యమైన భావనలు:
- ఎక్స్‌పోజెస్ (Exposes): ఒక అప్లికేషన్ కొన్ని మాడ్యూల్స్‌ను (ఉదాహరణకు, ఒక రియాక్ట్ కాంపోనెంట్, ఒక యుటిలిటీ ఫంక్షన్) 'ఎక్స్‌పోజ్' చేయగలదు, వీటిని ఇతర అప్లికేషన్‌లు వినియోగించుకోవచ్చు. ఈ ఎక్స్‌పోజ్ చేయబడిన మాడ్యూల్స్ రిమోట్‌గా లోడ్ చేయగల ఒక కంటైనర్‌లోకి బండిల్ చేయబడతాయి.
- రిమోట్‌లు (Remotes): మాడ్యూల్స్‌ను ఎక్స్‌పోజ్ చేసే అప్లికేషన్‌ను 'రిమోట్' అంటారు. ఇది షేర్డ్ కాన్ఫిగరేషన్ ద్వారా దాని మాడ్యూల్స్‌ను ఎక్స్‌పోజ్ చేస్తుంది.
- కన్స్యూమ్స్ (Consumes): రిమోట్ నుండి మాడ్యూల్స్‌ను ఉపయోగించాల్సిన అప్లికేషన్‌ను 'కన్స్యూమర్' లేదా 'హోస్ట్' అంటారు. ఇది రిమోట్ అప్లికేషన్‌లను ఎక్కడ కనుగొనాలో మరియు ఏ మాడ్యూల్స్‌ను లోడ్ చేయాలో తెలుసుకోవడానికి తనను తాను కాన్ఫిగర్ చేసుకుంటుంది.
- షేర్డ్ మాడ్యూల్స్ (Shared Modules): మాడ్యూల్ ఫెడరేషన్ షేర్డ్ మాడ్యూల్స్‌ను నిర్వచించడానికి అనుమతిస్తుంది. బహుళ అప్లికేషన్‌లు ఒకే షేర్డ్ మాడ్యూల్‌ను వినియోగించుకున్నప్పుడు, ఆ మాడ్యూల్ యొక్క ఒకే ఒక ఇన్‌స్టాన్స్ లోడ్ చేయబడి వాటి మధ్య పంచుకోబడుతుంది. బండిల్ పరిమాణాలను ఆప్టిమైజ్ చేయడానికి మరియు డిపెండెన్సీ వైరుధ్యాలను నివారించడానికి ఇది ఒక కీలకమైన అంశం.
యంత్రాంగం:
ఒక హోస్ట్ అప్లికేషన్‌కు రిమోట్ నుండి ఒక మాడ్యూల్ అవసరమైనప్పుడు, అది రిమోట్ యొక్క కంటైనర్ నుండి దానిని అభ్యర్థిస్తుంది. అప్పుడు రిమోట్ కంటైనర్ అభ్యర్థించిన మాడ్యూల్‌ను డైనమిక్‌గా లోడ్ చేస్తుంది. ఒకవేళ ఆ మాడ్యూల్ ఇప్పటికే మరొక వినియోగించే అప్లికేషన్ ద్వారా లోడ్ చేయబడి ఉంటే, అది పంచుకోబడుతుంది. ఈ డైనమిక్ లోడింగ్ మరియు షేరింగ్ రన్‌టైమ్‌లో సజావుగా జరుగుతుంది, ఇది డిపెండెన్సీలను నిర్వహించడానికి అత్యంత సమర్థవంతమైన మార్గాన్ని అందిస్తుంది.
గ్లోబల్ డెవలప్‌మెంట్ కోసం మాడ్యూల్ ఫెడరేషన్ యొక్క ప్రయోజనాలు
గ్లోబల్ అప్లికేషన్‌లను రూపొందించడానికి మాడ్యూల్ ఫెడరేషన్‌ను స్వీకరించడం వల్ల కలిగే ప్రయోజనాలు గణనీయమైనవి మరియు విస్తృతమైనవి:
1. మెరుగైన స్కేలబిలిటీ మరియు మెయింటెనబిలిటీ:
ఒక పెద్ద అప్లికేషన్‌ను చిన్న, స్వతంత్ర మైక్రోఫ్రంటెండ్‌లుగా విభజించడం ద్వారా, మాడ్యూల్ ఫెడరేషన్ స్వాభావికంగా స్కేలబిలిటీని ప్రోత్సహిస్తుంది. బృందాలు ఇతరులపై ప్రభావం చూపకుండా వ్యక్తిగత మైక్రోఫ్రంటెండ్‌లపై పని చేయవచ్చు, ఇది సమాంతర అభివృద్ధి మరియు స్వతంత్ర అమలులకు అనుమతిస్తుంది. ఇది ఒక భారీ కోడ్‌బేస్‌ను నిర్వహించడంతో సంబంధం ఉన్న మానసిక భారాన్ని తగ్గిస్తుంది మరియు అప్లికేషన్‌ను కాలక్రమేణా మరింత మెయింటెనబుల్ చేస్తుంది.
2. ఆప్టిమైజ్ చేయబడిన బండిల్ పరిమాణాలు మరియు పనితీరు:
రన్‌టైమ్ షేరింగ్ యొక్క అత్యంత ముఖ్యమైన ప్రయోజనం మొత్తం డౌన్‌లోడ్ పరిమాణాన్ని తగ్గించడం. ప్రతి అప్లికేషన్ సాధారణ లైబ్రరీలను (రియాక్ట్, లోడాష్, లేదా కస్టమ్ UI కాంపోనెంట్ లైబ్రరీ వంటివి) నకిలీ చేయడానికి బదులుగా, ఈ డిపెండెన్సీలు ఒకసారి లోడ్ చేయబడి పంచుకోబడతాయి. ఇది వీటికి దారితీస్తుంది:
- వేగవంతమైన ప్రారంభ లోడ్ సమయాలు: వినియోగదారులు తక్కువ కోడ్‌ను డౌన్‌లోడ్ చేస్తారు, దీని ఫలితంగా అప్లికేషన్ యొక్క ప్రారంభ రెండరింగ్ వేగంగా ఉంటుంది.
- మెరుగైన తదుపరి నావిగేషన్: డిపెండెన్సీలను పంచుకునే మైక్రోఫ్రంటెండ్‌ల మధ్య నావిగేట్ చేస్తున్నప్పుడు, ఇప్పటికే లోడ్ చేయబడిన మాడ్యూల్స్ తిరిగి ఉపయోగించబడతాయి, ఇది చురుకైన యూజర్ అనుభవానికి దారితీస్తుంది.
- తగ్గిన సర్వర్ లోడ్: సర్వర్ నుండి తక్కువ డేటా బదిలీ చేయబడుతుంది, ఇది హోస్టింగ్ ఖర్చులను తగ్గించగలదు.
ఉత్పత్తి జాబితాలు, వినియోగదారు ఖాతాలు మరియు చెక్అవుట్ కోసం ప్రత్యేక విభాగాలతో ఒక గ్లోబల్ ఈ-కామర్స్ ప్లాట్‌ఫారమ్‌ను పరిగణించండి. ప్రతి విభాగం ఒక ప్రత్యేక మైక్రోఫ్రంటెండ్ అయితే, అవన్నీ బటన్లు, ఫారమ్‌లు మరియు నావిగేషన్ కోసం ఒక సాధారణ UI కాంపోనెంట్ లైబ్రరీపై ఆధారపడితే, మాడ్యూల్ ఫెడరేషన్ వినియోగదారు ఏ విభాగాన్ని మొదట సందర్శించినా ఈ లైబ్రరీ ఒకేసారి లోడ్ అయ్యేలా నిర్ధారిస్తుంది.
3. పెరిగిన టీమ్ స్వయంప్రతిపత్తి మరియు సహకారం:
మాడ్యూల్ ఫెడరేషన్ వివిధ గ్లోబల్ ప్రాంతాలలో ఉన్న బృందాలను వారి సంబంధిత మైక్రోఫ్రంటెండ్‌లపై స్వతంత్రంగా పనిచేయడానికి శక్తివంతం చేస్తుంది. వారు తమ సొంత టెక్నాలజీ స్టాక్‌లను (కొంత స్థిరత్వాన్ని కొనసాగించడానికి, సహేతుకమైన పరిధిలో) మరియు అమలు షెడ్యూల్‌లను ఎంచుకోవచ్చు. ఈ స్వయంప్రతిపత్తి వేగవంతమైన ఆవిష్కరణను ప్రోత్సహిస్తుంది మరియు కమ్యూనికేషన్ భారాన్ని తగ్గిస్తుంది. అయినప్పటికీ, సాధారణ కోడ్‌ను పంచుకునే సామర్థ్యం సహకారాన్ని కూడా ప్రోత్సహిస్తుంది, ఎందుకంటే బృందాలు షేర్డ్ లైబ్రరీలు మరియు కాంపోనెంట్‌లకు సహకరించగలవు మరియు వాటి నుండి ప్రయోజనం పొందగలవు.
యూరప్, ఆసియా మరియు ఉత్తర అమెరికాలో వేర్వేరు ఉత్పత్తి సమర్పణలకు బాధ్యత వహించే ప్రత్యేక బృందాలతో ఒక గ్లోబల్ ఆర్థిక సంస్థను ఊహించుకోండి. మాడ్యూల్ ఫెడరేషన్ ప్రతి బృందం తమ నిర్దిష్ట ఫీచర్లను అభివృద్ధి చేయడానికి అనుమతిస్తుంది, అదే సమయంలో ఒక కేంద్ర బృందం అభివృద్ధి చేసిన సాధారణ ప్రమాణీకరణ సేవ లేదా షేర్డ్ చార్టింగ్ లైబ్రరీని ఉపయోగించుకుంటుంది. ఇది పునర్వినియోగాన్ని ప్రోత్సహిస్తుంది మరియు విభిన్న ఉత్పత్తి శ్రేణులలో స్థిరత్వాన్ని నిర్ధారిస్తుంది.
4. టెక్నాలజీ అజ్ఞాతవాదం (కొన్ని పరిమితులతో):
మాడ్యూల్ ఫెడరేషన్ వెబ్‌ప్యాక్‌పై నిర్మించబడినప్పటికీ, ఇది వేర్వేరు మైక్రోఫ్రంటెండ్‌ల మధ్య కొంతవరకు టెక్నాలజీ అజ్ఞాతవాదాన్ని అనుమతిస్తుంది. ఒక మైక్రోఫ్రంటెండ్ రియాక్ట్‌తో, మరొకటి Vue.js తో, మరియు ఇంకొకటి యాంగ్యులర్‌తో నిర్మించబడవచ్చు, అవి మాడ్యూల్స్‌ను ఎలా ఎక్స్‌పోజ్ చేయాలో మరియు ఎలా వినియోగించుకోవాలో అంగీకరించినంత కాలం. అయినప్పటికీ, రియాక్ట్ లేదా Vue వంటి సంక్లిష్ట ఫ్రేమ్‌వర్క్‌ల యొక్క నిజమైన రన్‌టైమ్ షేరింగ్ కోసం, ఈ ఫ్రేమ్‌వర్క్‌లు ఎలా ప్రారంభించబడతాయో మరియు పంచుకోబడతాయో ప్రత్యేక శ్రద్ధ వహించాలి, తద్వారా బహుళ ఇన్‌స్టాన్స్‌లు లోడ్ అవ్వడం మరియు వైరుధ్యాలు ఏర్పడటం నివారించబడుతుంది.
ఒక గ్లోబల్ SaaS కంపెనీ ఒక ఫ్రేమ్‌వర్క్‌తో అభివృద్ధి చేయబడిన కోర్ ప్లాట్‌ఫారమ్‌ను కలిగి ఉండవచ్చు మరియు ఆ తర్వాత ఇతర ఫ్రేమ్‌వర్క్‌లను ఉపయోగించి వేర్వేరు ప్రాంతీయ బృందాలచే అభివృద్ధి చేయబడిన ప్రత్యేక ఫీచర్ మాడ్యూల్స్‌ను రూపొందించవచ్చు. మాడ్యూల్ ఫెడరేషన్ ఈ విభిన్న భాగాల ఏకీకరణను సులభతరం చేయగలదు, షేర్డ్ డిపెండెన్సీలు జాగ్రత్తగా నిర్వహించబడితే.
5. సులభమైన వెర్షన్ నిర్వహణ:
ఒక షేర్డ్ డిపెండెన్సీని అప్‌డేట్ చేయవలసి వచ్చినప్పుడు, దానిని ఎక్స్‌పోజ్ చేసే రిమోట్‌ను మాత్రమే అప్‌డేట్ చేసి, తిరిగి అమలు చేయాలి. వినియోగించే అప్లికేషన్‌లన్నీ తమ తదుపరి లోడ్‌లో స్వయంచాలకంగా కొత్త వెర్షన్‌ను తీసుకుంటాయి. ఇది మొత్తం అప్లికేషన్ ల్యాండ్‌స్కేప్‌లో షేర్డ్ కోడ్‌ను నిర్వహించడం మరియు అప్‌డేట్ చేసే ప్రక్రియను సులభతరం చేస్తుంది.
మాడ్యూల్ ఫెడరేషన్‌ను అమలు చేయడం: ఆచరణాత్మక ఉదాహరణలు మరియు వ్యూహాలు
ఆచరణలో మాడ్యూల్ ఫెడరేషన్‌ను ఎలా సెటప్ చేయాలో మరియు ఎలా ఉపయోగించుకోవాలో చూద్దాం. ప్రధాన భావనలను వివరించడానికి మేము సరళీకృత వెబ్‌ప్యాక్ కాన్ఫిగరేషన్‌లను ఉపయోగిస్తాము.
దృష్టాంతం: ఒక UI కాంపోనెంట్ లైబ్రరీని పంచుకోవడం
మన దగ్గర రెండు అప్లికేషన్‌లు ఉన్నాయని అనుకుందాం: ఒక 'ప్రొడక్ట్ కేటలాగ్' (రిమోట్) మరియు ఒక 'యూజర్ డాష్‌బోర్డ్' (హోస్ట్). రెండూ ఒక ప్రత్యేక 'షేర్డ్ UI' లైబ్రరీ నుండి షేర్డ్ 'బటన్' కాంపోనెంట్‌ను ఉపయోగించాల్సి ఉంటుంది.
1. 'షేర్డ్ UI' లైబ్రరీ (రిమోట్):
ఈ అప్లికేషన్ దాని 'బటన్' కాంపోనెంట్‌ను ఎక్స్‌పోజ్ చేస్తుంది.
'షేర్డ్ UI' (రిమోట్) కోసంwebpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3001/dist/', // URL where the remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'sharedUI',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.js', // Expose Button component
},
shared: {
// Define shared dependencies
react: {
singleton: true, // Ensure only one instance of React is loaded
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations (babel, devServer, etc.)
};
src/components/Button.js:
import React from 'react';
const Button = ({ onClick, children }) => (
);
export default Button;
ఈ సెటప్‌లో, 'షేర్డ్ UI' దాని Button కాంపోనెంట్‌ను ఎక్స్‌పోజ్ చేస్తుంది మరియు react మరియు react-dom లను షేర్డ్ డిపెండెన్సీలుగా singleton: true తో ప్రకటిస్తుంది, తద్వారా అవి వినియోగించే అప్లికేషన్‌లలో సింగిల్ ఇన్‌స్టాన్స్‌లుగా పరిగణించబడతాయి.
2. 'ప్రొడక్ట్ కేటలాగ్' అప్లికేషన్ (రిమోట్):
ఈ అప్లికేషన్‌కు కూడా షేర్డ్ Button కాంపోనెంట్‌ను వినియోగించుకోవాలి మరియు దాని స్వంత డిపెండెన్సీలను పంచుకోవాలి.
webpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3002/dist/', // URL where this remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'productCatalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList.js', // Expose ProductList
},
remotes: {
// Define a remote it needs to consume from
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
},
shared: {
// Shared dependencies with the same version and singleton: true
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations
};
'ప్రొడక్ట్ కేటలాగ్' ఇప్పుడు దాని ProductList కాంపోనెంట్‌ను ఎక్స్‌పోజ్ చేస్తుంది మరియు దాని స్వంత రిమోట్‌లను ప్రకటిస్తుంది, ప్రత్యేకంగా 'షేర్డ్ UI' అప్లికేషన్‌ను సూచిస్తుంది. ఇది కూడా అదే షేర్డ్ డిపెండెన్సీలను ప్రకటిస్తుంది.
3. 'యూజర్ డాష్‌బోర్డ్' అప్లికేషన్ (హోస్ట్):
ఈ అప్లికేషన్ 'షేర్డ్ UI' నుండి Button కాంపోనెంట్‌ను మరియు 'ప్రొడక్ట్ కేటలాగ్' నుండి ProductList ను వినియోగించుకుంటుంది.
webpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3000/dist/', // URL where this app's bundles are served
},
plugins: [
new ModuleFederationPlugin({
name: 'userDashboard',
remotes: {
// Define the remotes this host application needs
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
},
shared: {
// Shared dependencies that must match the remotes
react: {
singleton: true,
import: 'react', // Specify the module name for import
},
'react-dom': {
singleton: true,
import: 'react-dom',
},
},
}),
],
// ... other webpack configurations
};
'యూజర్ డాష్‌బోర్డ్' కోసం src/index.js:
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
// Dynamically import the shared Button component
const RemoteButton = React.lazy(() => import('sharedUI/Button'));
// Dynamically import the ProductList component
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));
const App = () => {
const handleClick = () => {
alert('Button clicked from shared UI!');
};
return (
User Dashboard
Loading Button... }>
Click Me
Products
Loading Products...