HTML Academy · पाठ

ES मॉड्यूल स्क्रिप्ट: type=module

type=module से JavaScript को ES मॉड्यूल के रूप में लोड करें

पाठ 1, कुल 4 में से13 चरण

ES मॉड्यूल स्क्रिप्ट: type=module, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ES मॉड्यूल क्या हैं

ES मॉड्यूल एक JavaScript फ़ाइल है जो import और export घोषणाओं का उपयोग करती है। मॉड्यूल का अपना दायरा होता है (कोई वैश्विक प्रदूषण नहीं), डिफ़ॉल्ट रूप से सख्त मोड होता है और निर्भरताएँ स्पष्ट होती हैं—इससे स्क्रिप्ट-टैग के क्रम से जुड़ी दशकों पुरानी समस्याएँ दूर हो जाती हैं।

मॉड्यूल स्क्रिप्ट टैग

<script type="module" src="app.js"> ब्राउज़र को बताता है कि फ़ाइल एक मॉड्यूल है। ब्राउज़र आयातों का विश्लेषण करता है, निर्भरताएँ समानांतर रूप से प्राप्त करता है और पूरे निर्भरता ग्राफ़ के डाउनलोड व संकलित होने के बाद ही प्रवेश मॉड्यूल को निष्पादित करता है।

<script type="module" src="app.js"></script>

मॉड्यूल स्थगित होते हैं

मॉड्यूल स्क्रिप्ट ऐसे व्यवहार करती हैं जैसे उनमें defer लगा हो: वे HTML के विश्लेषण के साथ समानांतर रूप से डाउनलोड होती हैं और विश्लेषण पूरा होने के बाद घोषणा क्रम में निष्पादित होती हैं। आप <script type="module"> को कहीं भी (यहाँ तक कि <head> में भी) रख सकते हैं, और इससे पृष्ठ अवरुद्ध नहीं होता।

आयात निर्दिष्टकों का उपयोग करते हैं

आयात कथन एक निर्दिष्टक का उपयोग करता है—या तो सापेक्ष URL (./utils.js), पूर्ण URL (https://cdn.example.com/lib.js) या सादा नाम (lodash)। सादे नामों के लिए आयात मानचित्र आवश्यक होता है (जिसे अगली इकाई में समझाया गया है), क्योंकि ब्राउज़र को पता नहीं होता कि वे किस फ़ाइल से जुड़े हैं।

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

फ़ाइल एक्सटेंशन आवश्यक हैं

ब्राउज़र आयात निर्दिष्टकों में अपने-आप .js नहीं जोड़ते। import "./utils" विफल होता है; import "./utils.js" काम करता है। बंडलर और नोड अधिक उदार हो सकते हैं, लेकिन ब्राउज़र सख्त होता है, इसलिए एक्सटेंशन स्पष्ट रूप से लिखिए।

CORS आवश्यक है

मॉड्यूल हमेशा CORS के साथ प्राप्त किए जाते हैं, भले ही वे उसी ऑरिजिन से हों। दूसरे ऑरिजिन की मॉड्यूल फ़ाइलों को उपयुक्त Access-Control-Allow-Origin हेडर देना होगा, वरना आयात विफल हो जाता है। अधिकांश CDN (esm.sh, jsdelivr, unpkg) इसे पहले से सही ढंग से कॉन्फ़िगर करते हैं।

शीर्ष-स्तरीय await

मॉड्यूल शीर्ष स्तर पर await का समर्थन करते हैं—इसके लिए एसिंक्रोनस फ़ंक्शन का आवरण आवश्यक नहीं है: const data = await fetch("/api").then(r => r.json())। शीर्ष-स्तरीय await के पूरा होने तक मॉड्यूल के उपभोक्ता निष्पादित होने की प्रतीक्षा करते हैं।

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

मॉड्यूल एकल-इकाइयाँ होते हैं

किसी मॉड्यूल का मूल्यांकन प्रत्येक सत्र में ठीक एक बार होता है, चाहे कितने भी अन्य मॉड्यूल उसे आयात करें। निर्यात ऑब्जेक्ट साझा किया जाता है—हर उपभोक्ता को वही इंस्टेंस दिखाई देता है। इसलिए मॉड्यूल कॉन्फ़िगरेशन ऑब्जेक्ट या स्थिति भंडार जैसी साझा एकल-इकाइयाँ बनाने का साफ़ तरीका हैं।

इनलाइन मॉड्यूल

आप मॉड्यूल इनलाइन भी लिख सकते हैं: <script type="module">import x from "./y.js"; ...</script>। यह प्रारंभिक कोड या प्रयोगों के लिए उपयोगी है, हालांकि बाहरी फ़ाइलों को डिबग करना और कैश करना आसान होता है।

पुराने सिस्टम के लिए nomodule वापसी विकल्प

एक <script type="module"> को <script nomodule src="legacy.js"> के साथ रखें। आधुनिक ब्राउज़र मॉड्यूल चलाते हैं और nomodule स्क्रिप्ट को अनदेखा करते हैं; पुराने ब्राउज़र nomodule स्क्रिप्ट चलाते हैं और मॉड्यूल को अनदेखा करते हैं। इसका उपयोग सभी-ESM ऐप्स में संक्रमण के दौरान किया जाता है।

त्रुटियाँ और आयात विफलताएँ

जो आयात विफल होता है (404, CORS या वाक्य-विन्यास त्रुटि), वह त्रुटि उत्पन्न करता है और पूरे मॉड्यूल ग्राफ़ के निष्पादन को रोक देता है। विफल मॉड्यूल अनुरोधों का पता लगाने के लिए नेटवर्क पैनल और वास्तविक आयात त्रुटि संदेश पढ़ने के लिए कंसोल का उपयोग कीजिए।

ज्ञान जाँच

मॉड्यूल स्क्रिप्ट आपके द्वारा defer निर्दिष्ट किए बिना भी उसके जैसा व्यवहार क्यों करती हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ES मॉड्यूल स्क्रिप्ट: type=module” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ES मॉड्यूल स्क्रिप्ट: type=module” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ES मॉड्यूल स्क्रिप्ट: type=module” में मैं क्या सीखूँगा?

type=module से JavaScript को ES मॉड्यूल के रूप में लोड करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“ES मॉड्यूल स्क्रिप्ट: type=module” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ