इंपोर्ट मैप की मदद से, ईएस मॉड्यूल अब इंपोर्ट करना काफ़ी बेहतर हो गया है.
ES मॉड्यूल, वेब ऐप्लिकेशन में JavaScript कोड को शामिल करने और उसे दोबारा इस्तेमाल करने का एक आधुनिक तरीका है. ये मॉडर्न ब्राउज़र पर काम करते हैं. साथ ही, इनसे JavaScript को बनाने के पुराने और बिना मॉड्यूल वाले तरीकों की तुलना में कई फ़ायदे मिलते हैं.
<script type="importmap"> टैग के साथ ES मॉड्यूल को आधुनिक तरीके से इस्तेमाल किया जा सकता है. इस टैग की मदद से, बाहरी मॉड्यूल के नामों को उनसे जुड़े यूआरएल के साथ मैप करने की सुविधा मिलती है. इससे आपके कोड में बाहरी मॉड्यूल को शामिल करना और इस्तेमाल करना आसान हो जाता है.
<script type="importmap"> का इस्तेमाल करने के लिए, आपको पहले इसे अपने एचटीएमएल दस्तावेज़ के <head> सेक्शन में जोड़ना होगा. टैग के अंदर, एक JSON ऑब्जेक्ट बनाया जा सकता है, जो मॉड्यूल के नामों को उनसे जुड़े यूआरएल से मैप करता है. उदाहरण के लिए:
<script type="importmap">
{
"imports": {
"browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
}
}
</script>
यह कोड, "browser-fs-access" नाम के एक एक्सटर्नल मॉड्यूल की जानकारी देता है. साथ ही, इसे Unpkg CDN पर होस्ट किए गए ब्राउज़र-fs-access लाइब्रेरी के यूआरएल से मैप करता है. इस मैपिंग के बाद, अब अपने कोड में browser-fs-access लाइब्रेरी को शामिल करने के लिए, import
कीवर्ड का इस्तेमाल किया जा सकता है. ध्यान दें कि import कीवर्ड सिर्फ़
type="module" एट्रिब्यूट वाले script टैग में उपलब्ध होता है.
<button>Select a text file</button>
<script type="module">
import {fileOpen} from 'browser-fs-access';
const button = document.querySelector('button');
button.addEventListener('click', async () => {
const file = await fileOpen({
mimeTypes: ['text/plain'],
});
console.log(await file.text());
});
</script>
JavaScript बनाने के पुराने और बिना मॉड्यूल वाले तरीकों की तुलना में, <script type="importmap"> टैग और import कीवर्ड का इस्तेमाल करने से आपको कई फ़ायदे मिलते हैं. इससे आपको उन बाहरी मॉड्यूल के बारे में साफ़ तौर पर और
साफ़ तौर पर बताना होगा जिन पर आपका कोड निर्भर करता है. इससे आपके कोड को समझना और उसे बनाए रखना
आसान हो जाता है. कुल मिलाकर देखें, तो <script type="importmap"> टैग के साथ ES मॉड्यूल का इस्तेमाल करना, वेब ऐप्लिकेशन में JavaScript कोड को शामिल करने और उसे फिर से इस्तेमाल करने का
एक आधुनिक और बेहतर तरीका है. सुविधाओं की पहचान करने के लिए, इन तरीकों का इस्तेमाल किया जा सकता है:
if (HTMLScriptElement.supports('importmap')) {
// The importmap feature is supported.
}
ब्राउज़र सहायता
- 89
- 89
- 108
- 78 जीबी में से