M

MLOG

हिन्दी

वेबपैक 5 में जावास्क्रिप्ट मॉड्यूल फेडरेशन के साथ माइक्रो-फ्रंटएंड की शक्ति को अनलॉक करें। स्केलेबल, रखरखाव योग्य और स्वतंत्र वेब एप्लिकेशन बनाना सीखें।

वेबपैक 5 के साथ जावास्क्रिप्ट मॉड्यूल फेडरेशन: माइक्रो-फ्रंटएंड के लिए एक व्यापक गाइड

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

माइक्रो-फ्रंटएंड क्या हैं?

माइक्रो-फ्रंटएंड एक आर्किटेक्चरल शैली है जहां एक फ्रंटएंड ऐप को छोटी, स्वतंत्र इकाइयों में विघटित किया जाता है, जिन्हें विभिन्न टीमों द्वारा स्वायत्त रूप से विकसित, परीक्षण और डिप्लॉय किया जा सकता है। प्रत्येक माइक्रो-फ्रंटएंड एक विशिष्ट व्यावसायिक डोमेन या सुविधा के लिए जिम्मेदार होता है, और वे संपूर्ण यूजर इंटरफेस बनाने के लिए रनटाइम पर एक साथ संयोजित होते हैं।

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

माइक्रो-फ्रंटएंड के लाभ:

माइक्रो-फ्रंटएंड की चुनौतियाँ:

जावास्क्रिप्ट मॉड्यूल फेडरेशन क्या है?

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

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

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

मॉड्यूल फेडरेशन में मुख्य अवधारणाएँ:

वेबपैक 5 के साथ मॉड्यूल फेडरेशन सेटअप करना: एक प्रैक्टिकल गाइड

आइए वेबपैक 5 के साथ मॉड्यूल फेडरेशन स्थापित करने के एक व्यावहारिक उदाहरण के माध्यम से चलते हैं। हम दो सरल एप्लिकेशन बनाएंगे: एक होस्ट एप्लिकेशन और एक रिमोट एप्लिकेशन। रिमोट एप्लिकेशन एक घटक को उजागर करेगा, और होस्ट एप्लिकेशन इसका उपभोग करेगा।

1. प्रोजेक्ट सेटअप

अपने अनुप्रयोगों के लिए दो अलग-अलग निर्देशिकाएँ बनाएँ: `host` और `remote`।

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. रिमोट एप्लिकेशन कॉन्फ़िगरेशन

`remote` निर्देशिका में, निम्नलिखित फाइलें बनाएं:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` को मूल HTML संरचना के साथ बनाएं। महत्वपूर्ण है `

`

3. होस्ट एप्लिकेशन कॉन्फ़िगरेशन

`host` निर्देशिका में, निम्नलिखित फाइलें बनाएं:

  • `src/index.js`: एप्लिकेशन के लिए एंट्री पॉइंट।
  • `webpack.config.js`: वेबपैक कॉन्फ़िगरेशन फ़ाइल।

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` को मूल HTML संरचना के साथ बनाएं (रिमोट ऐप के समान)। महत्वपूर्ण है `

`

4. बेबेल इंस्टॉल करें

`host` और `remote` दोनों निर्देशिकाओं में, बेबेल निर्भरताएँ स्थापित करें:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

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

`host` और `remote` दोनों निर्देशिकाओं में, `package.json` में निम्नलिखित स्क्रिप्ट जोड़ें:

```json "scripts": { "start": "webpack serve" } ```

अब, दोनों एप्लिकेशन शुरू करें:

```bash cd remote npm start cd ../host npm start ```

अपना ब्राउज़र खोलें और `http://localhost:3000` पर नेविगेट करें। आपको होस्ट एप्लिकेशन के अंदर रेंडर किया गया रिमोट कंपोनेंट दिखाई देना चाहिए।

मुख्य कॉन्फ़िगरेशन विकल्पों की व्याख्या:

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

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

डायनामिक रिमोट्स

वेबपैक कॉन्फ़िगरेशन में रिमोट अनुप्रयोगों के URL को हार्डकोड करने के बजाय, आप उन्हें रनटाइम पर गतिशील रूप से लोड कर सकते हैं। यह आपको होस्ट एप्लिकेशन को फिर से बनाए बिना रिमोट अनुप्रयोगों के स्थान को आसानी से अपडेट करने की अनुमति देता है।

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

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

अब आप होस्ट ऐप को एक क्वेरी पैरामीटर `?remote=http://localhost:3001/remoteEntry.js` के साथ लोड कर सकते हैं।

संस्करणबद्ध साझा मॉड्यूल

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

आप वेबपैक कॉन्फ़िगरेशन में प्रत्येक साझा मॉड्यूल की संस्करण सीमा निर्दिष्ट कर सकते हैं।

```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

कस्टम मॉड्यूल लोडर्स

मॉड्यूल फेडरेशन आपको कस्टम मॉड्यूल लोडर परिभाषित करने की अनुमति देता है जिनका उपयोग विभिन्न स्रोतों से या विभिन्न प्रारूपों में मॉड्यूल लोड करने के लिए किया जा सकता है। यह CDN से या कस्टम मॉड्यूल रजिस्ट्री से मॉड्यूल लोड करने के लिए उपयोगी हो सकता है।

माइक्रो-फ्रंटएंड के बीच स्टेट साझा करना

माइक्रो-फ्रंटएंड आर्किटेक्चर की चुनौतियों में से एक विभिन्न माइक्रो-फ्रंटएंड के बीच स्थिति साझा करना है। इस चुनौती से निपटने के लिए आप कई तरीके अपना सकते हैं:

मॉड्यूल फेडरेशन के साथ माइक्रो-फ्रंटएंड लागू करने के लिए सर्वोत्तम अभ्यास

मॉड्यूल फेडरेशन के साथ माइक्रो-फ्रंटएंड लागू करते समय ध्यान रखने योग्य कुछ सर्वोत्तम अभ्यास यहां दिए गए हैं:

मॉड्यूल फेडरेशन के वास्तविक-विश्व उदाहरण

हालांकि विशिष्ट केस स्टडी अक्सर गोपनीय होती हैं, यहाँ कुछ सामान्यीकृत परिदृश्य दिए गए हैं जहाँ मॉड्यूल फेडरेशन अविश्वसनीय रूप से उपयोगी हो सकता है:

निष्कर्ष

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

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