इस पेज का अनुवाद Cloud Translation API से किया गया है.

JavaScript इंपोर्ट करने वाले मैप अब क्रॉस-ब्राउज़र पर काम करते हैं

मैप इंपोर्ट करने की सुविधा की मदद से, अब ES मॉड्यूल को इंपोर्ट करना काफ़ी आसान हो गया है.

Thomas Steiner

ES मॉड्यूल, वेब ऐप्लिकेशन में JavaScript कोड को शामिल करने और उसे फिर से इस्तेमाल करने का आधुनिक तरीका है. ये आधुनिक ब्राउज़र पर काम करते हैं. साथ ही, JavaScript डेवलपमेंट के लिए, पुराने और नॉन-मॉड्यूलर तरीकों की तुलना में कई फ़ायदे देते हैं.

ES मॉड्यूल का इस्तेमाल करने का आधुनिक तरीका, <script type="importmap"> टैग का इस्तेमाल करना है. इस टैग की मदद से, बाहरी मॉड्यूल के नामों को उनके यूआरएल से मैप किया जा सकता है. इससे, बाहरी मॉड्यूल को अपने कोड में शामिल करना और उनका इस्तेमाल करना आसान हो जाता है.

<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 पर होस्ट की गई browser-fs-access लाइब्रेरी के यूआरएल पर मैप करता है. इस मैपिंग के बाद, अब अपने कोड में browser-fs-access लाइब्रेरी को शामिल करने के लिए, import कीवर्ड का इस्तेमाल किया जा सकता है. ध्यान दें कि import कीवर्ड, सिर्फ़ script टैग में उपलब्ध होता है. साथ ही, इसमें type="module" एट्रिब्यूट होना चाहिए.

<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.
}

Browser Support

Source

इस बारे में और पढ़ें