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

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

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

Thomas Steiner

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" नाम के एक बाहरी मॉड्यूल को तय करता है. साथ ही, इसे browser-fs-access लाइब्रेरी के यूआरएल से मैप करता है, जो कि Unpkg CDN पर होस्ट किया जाता है. इस मैपिंग के लागू होने के बाद, अब अपने कोड में 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>

<script type="importmap"> टैग और import कीवर्ड का इस्तेमाल करने पर, JavaScript डेवलपमेंट के पुराने और बिना मॉड्यूलर वाले तरीकों की तुलना में कई फ़ायदे मिलते हैं. इसकी मदद से, उन बाहरी मॉड्यूल के बारे में साफ़ तौर पर बताया जा सकता है जिन पर आपका कोड निर्भर करता है. इससे आपके कोड को समझना और उसे मैनेज करना आसान हो जाता है. कुल मिलाकर, <script type="importmap"> टैग के साथ ES मॉड्यूल का इस्तेमाल करना, वेब ऐप्लिकेशन में JavaScript कोड को शामिल करने और उसका फिर से इस्तेमाल करने का एक आधुनिक और बेहतर तरीका है. सुविधा का पता लगाने के लिए सहायता पाने का तरीका यहां बताया गया है:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

ब्राउज़र सहायता

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

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