Vue के साथ Webpack Module Federation
ModuleFederationPlugin, एक्सपोज़ किए गए मॉड्यूल, रिमोट, साझा निर्भरताएँ और रिमोट कंपोनेंट लोड करना
Vue के साथ Webpack Module Federation, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
वेबपैक में Module Federation
वेबपैक 5 में Module Federation पहले से शामिल है। यह एक निर्माण को दूसरे निर्माणों के लिए मॉड्यूल उपलब्ध कराने और उनसे मॉड्यूल रनटाइम पर इस्तेमाल करने देता है—रनटाइम माइक्रो-फ़्रंटएंड की नींव।
होस्ट और रिमोट
दो भूमिकाएँ होती हैं: एक रिमोट component उपलब्ध कराता है और एक होस्ट उनका इस्तेमाल करता है। कोई ऐप दोनों भूमिकाएँ निभा सकता है। होस्ट रिमोट का कोड निर्माण-समय पर नहीं, बल्कि रनटाइम पर एचटीटीपी के ज़रिए लोड करता है।
ModuleFederationPlugin
फेडरेशन कॉन्फ़िगर करने के लिए अपने वेबपैक plugins ऐरे में ModuleFederationPlugin जोड़ें। इसके विकल्प नाम, आपके द्वारा उपलब्ध कराए जाने वाले और इस्तेमाल किए जाने वाले मॉ्यूल तथा साझा निर्भरताएँ तय करते हैं।
const { ModuleFederationPlugin } = require("webpack").container
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "checkout",
}),
],
}नाम विकल्प
name इस निर्माण का अद्वितीय वैश्विक पहचानकर्ता है। होस्ट इसी नाम से किसी रिमोट का संदर्भ लेते हैं।
new ModuleFederationPlugin({
name: "checkout",
filename: "remoteEntry.js",
})मॉड्यूल उपलब्ध कराने का विकल्प (रिमोट)
रिमोट अपने द्वारा साझा किए जाने वाले मॉड्यूलों को exposes में सूचीबद्ध करता है। कुंजियाँ सार्वजनिक पथ होती हैं; मान स्थानीय फ़ाइलों के पथ होते हैं।
new ModuleFederationPlugin({
name: "checkout",
filename: "remoteEntry.js",
exposes: {
"./CartButton": "./src/components/CartButton.vue",
},
})remoteEntry घोषणापत्र
रिमोट एक remoteEntry.js घोषणापत्र बनाता है, जिसमें उसके उपलब्ध कराए गए मॉड्यूलों का विवरण होता है। होस्ट इस फ़ाइल को लोड करके रनटाइम पर रिमोट के कोड को खोजते और प्राप्त करते हैं।
// host loads: https://checkout.example.com/remoteEntry.jsरिमोट का विकल्प (होस्ट)
होस्ट remotes में उन रिमोट की घोषणा करता है जिनका वह इस्तेमाल करता है। इसमें एक स्थानीय उपनाम को रिमोट के नाम और उसके remoteEntry.js URL से जोड़ा जाता है।
new ModuleFederationPlugin({
name: "shell",
remotes: {
checkout: "checkout@https://checkout.example.com/remoteEntry.js",
},
})साझा निर्भरताओं का विकल्प
shared उन निर्भरताओं की सूची है जिन्हें दोनों पक्ष साझा करें, ताकि उनकी दो प्रतियाँ लोड न हों। व्यू जैसे फ़्रेमवर्क को साझा करना आवश्यक है, ताकि सभी माइक्रो-फ़्रंटएंड एक ही इंस्टेंस का इस्तेमाल करें।
new ModuleFederationPlugin({
name: "shell",
remotes: { /* ... */ },
shared: ["vue"],
})व्यू के लिए एकल प्रति
व्यू की एकल प्रति होनी चाहिए—पृष्ठ में ठीक एक प्रति। व्यू के दो इंस्टेंस प्रतिक्रियाशीलता और component की पहचान बिगाड़ देते हैं। इसे संस्करण की आवश्यकता के साथ एकल प्रति के रूप में चिह्नित करें।
shared: {
vue: {
singleton: true,
requiredVersion: "^3.4.0",
},
}रिमोट component का इस्तेमाल
रिमोट मॉड्यूल को रनटाइम पर गतिशील रूप से आयात करें। चूँकि यह नेटवर्क से लोड होता है, इसलिए गतिशील import() का इस्तेमाल करें—व्यू में इसे आम तौर पर defineAsyncComponent में लपेटा जाता है।
import { defineAsyncComponent } from "vue"
const CartButton = defineAsyncComponent(() =>
import("checkout/CartButton")
)रिमोट को रेंडर करना
अतुल्यकालिक component का इस्तेमाल अपने टेम्पलेट में किसी अन्य component की तरह करें। वेबपैक पहली बार रेंडर होने पर रिमोट का कोड प्राप्त करके उसे कैश कर लेता है।
<template>
<header>
<CartButton />
</header>
</template>त्वरित जाँच
व्यू के साथ Module Federation की अपनी समझ जाँचें।
पुनरावलोकन
आपने वेबपैक Module Federation सीखा:
ModuleFederationPluginफेडरेशन कॉन्फ़िगर करता है;nameनिर्माण की पहचान करता है।- रिमोट
exposesकी सूची देता है औरremoteEntry.jsघोषणापत्र बनाता है। - होस्ट
remotesमें किसी उपनाम कोname@URL/remoteEntry.jsसे जोड़ता है। sharedदोहराई गई निर्भरताओं को रोकता है; व्यू के लिएsingleton: trueआवश्यक है।- रिमोट का इस्तेमाल गतिशील
import("remote/Module")के ज़रिए करें, आम तौर परdefineAsyncComponentके साथ।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “Vue के साथ Webpack Module Federation” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Vue के साथ Webpack Module Federation” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Vue के साथ Webpack Module Federation” में मैं क्या सीखूँगा?
ModuleFederationPlugin, एक्सपोज़ किए गए मॉड्यूल, रिमोट, साझा निर्भरताएँ और रिमोट कंपोनेंट लोड करना आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“Vue के साथ Webpack Module Federation” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- माइक्रो-फ़्रंटएंड आर्किटेक्चर के सिद्धांत
- Vue के साथ Webpack Module Federation
- Vite Federation Plugin
- माइक्रो-फ़्रंटएंड में साझा स्थिति