ES Modules: import, export और dynamic import
named exports, default exports और namespace imports का उपयोग करें और performance के लिए dynamic import() से code को lazy-load करें।
ES Modules: import, export और dynamic import, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
समीक्षा: ES मॉड्यूल की मूल बातें
ES मॉड्यूल हर फ़ाइल को अपना अलग स्कोप देते हैं। नामित एक्सपोर्ट विशिष्ट मान साझा करते हैं; डिफ़ॉल्ट एक्सपोर्ट मुख्य मान साझा करता है। बंडलर या ब्राउज़र लोड होने के समय इम्पोर्ट को हल करता है।
// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }
// Default export
export default class ApiClient {
constructor(base = API_BASE) { this.base = base; }
}ट्री शेकिंग — नामित एक्सपोर्ट क्यों महत्वपूर्ण हैं
बंडलर (रोलअप, ईसबिल्ड, वाइट) उपयोग न किए गए एक्सपोर्ट हटा देते हैं। यदि आप केवल { formatDate } इम्पोर्ट करते हैं, तो बंडलर बाकी सब कुछ बंडल से हटा देता है। नामित एक्सपोर्ट ट्री शेकिंग सक्षम करते हैं; import * as utils इसे रोक सकता है।
// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunkडायनेमिक import() — लेज़ी लोडिंग
डायनेमिक import() एक Promise लौटाता है। मॉड्यूल केवल तब प्राप्त किया जाता है जब कोड चलता है। बंडलर इन्हें अपने-आप अलग-अलग चंक्स में बाँट देते हैं।
// Only load the heavy charting library when needed:
const showChart = async () => {
const { Chart } = await import('./Chart.js');
new Chart(canvas, config);
};
btn.addEventListener('click', showChart);त्रुटि प्रबंधन के साथ डायनेमिक import
नेटवर्क विफलताओं या अनुपलब्ध मॉड्यूल को सही ढंग से संभालने के लिए डायनेमिक इम्पोर्ट को try/catch में लपेटें।
try {
const module = await import('./optional-feature.js');
module.activate();
} catch (err) {
console.warn('Optional feature unavailable:', err.message);
}import.meta
import.meta में वर्तमान मॉड्यूल से संबंधित मेटाडेटा होता है। मुख्य प्रॉपर्टी हैं: import.meta.url (पूर्ण URL), import.meta.env (Vite पर्यावरण वेरिएबल) और import.meta.resolve()।
// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;
// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;मॉड्यूल का निष्पादन — एक बार
ES मॉड्यूल का मूल्यांकन इस बात की परवाह किए बिना एक बार होता है कि उन्हें कितनी बार इम्पोर्ट किया गया है। एक ही मॉड्यूल के सभी इम्पोर्ट एक ही इंस्टेंस साझा करते हैं। इसी कारण मॉड्यूल सिंगलटन (स्टोर और इवेंट बस) के लिए बहुत उपयोगी हैं।
// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;
// Any file that imports from store.js gets the same state instanceचक्रीय निर्भरताएँ
दो मॉड्यूल एक-दूसरे को इम्पोर्ट कर सकते हैं। JavaScript इसे संभाल लेता है, लेकिन मूल्यांकन के क्रम के कारण पहली बार उपयोग करने पर मान undefined हो सकते हैं। अधिकांश मामलों में चक्रों से बचने के लिए संरचना बदलें।
TypeScript में केवल-टाइप इम्पोर्ट
केवल प्रकार इम्पोर्ट करने के लिए import type { ... } का उपयोग करें। इन्हें संकलन के समय मिटा दिया जाता है और ये आउटपुट बंडल में कभी दिखाई नहीं देते। केवल-टाइप संदर्भों से होने वाली चक्रीय निर्भरताओं से बचने के लिए इनका उपयोग करें।
import type { User } from './types.js';
function greet(user: User): string {
return `Hello, ${user.name}`;
}पुनः-एक्सपोर्ट और बैरल फ़ाइलें
बैरल फ़ाइल कई मॉड्यूल से पुनः-एक्सपोर्ट करती है और एक सुविधाजनक इम्पोर्ट केंद्र बनाती है। बड़े ऐप में बैरल फ़ाइलों का सावधानी से उपयोग करें — ये ट्री शेकिंग में बाधा डाल सकती हैं।
// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';
// Consumer:
import { Button, Input } from '@/components';ब्राउज़र में script type=module
बंडलर के बिना सीधे ब्राउज़र में ES मॉड्यूल सिंटैक्स सक्षम करने के लिए स्क्रिप्ट टैग में type="module" जोड़ें। मॉड्यूल डिफ़ॉल्ट रूप से बाद में निष्पादित होते हैं और उनका अपना स्कोप होता है।
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>CommonJS बनाम ESM इंटरऑपरेबिलिटी
Node.js दोनों का समर्थन करता है। ESM फ़ाइलें .mjs का उपयोग करती हैं या package.json में "type": "module" सेट करती हैं। ESM से CommonJS पैकेज का उपयोग करने पर डिफ़ॉल्ट एक्सपोर्ट module.exports का मान होता है। बंडलर इसे पारदर्शी रूप से संभाल लेते हैं।
त्वरित जाँच
एकल डिफ़ॉल्ट एक्सपोर्ट ऑब्जेक्ट की तुलना में नामित एक्सपोर्ट का मुख्य प्रदर्शन लाभ क्या है?
पुनरावलोकन: ES मॉड्यूल का गहन अध्ययन
मॉड्यूल एक बार निष्पादित होते हैं; सभी इम्पोर्ट करने वाले एक ही इंस्टेंस साझा करते हैं। ट्री शेकिंग उपयोग न किए गए नामित एक्सपोर्ट हटा देती है। डायनेमिक import() लेज़ी लोडिंग और कोड स्प्लिटिंग सक्षम करता है। import.meta मॉड्यूल का संदर्भ देता है। बैरल फ़ाइलें सुविधाजनक हैं, लेकिन ट्री शेकिंग को नुकसान पहुँचा सकती हैं। TypeScript में केवल-टाइप इम्पोर्ट कोई आउटपुट उत्पन्न नहीं करते।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “ES Modules: import, export और dynamic import” पाठ निःशुल्क है?
हाँ—“ES Modules: import, export और dynamic import” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“ES Modules: import, export और dynamic import” में मैं क्या सीखूँगा?
named exports, default exports और namespace imports का उपयोग करें और performance के लिए dynamic import() से code को lazy-load करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“ES Modules: import, export और dynamic import” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- ES Modules: import, export और dynamic import
- npm और package.json: dependencies, scripts
- Vite: dev server और build
- Bundling Concepts: tree shaking, code splitting