আমদানি মানচিত্র সহ, ES মডিউল আমদানি করা এখন অনেক ভাল হয়ে উঠেছে।
ES মডিউলগুলি ওয়েব অ্যাপ্লিকেশনগুলিতে জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত এবং পুনরায় ব্যবহার করার একটি আধুনিক উপায়। এগুলি আধুনিক ব্রাউজার দ্বারা সমর্থিত এবং জাভাস্ক্রিপ্ট বিকাশে পুরানো, নন-মডুলার পদ্ধতির উপর বেশ কিছু সুবিধা প্রদান করে।
ES মডিউল ব্যবহার করার একটি আধুনিক উপায় হল <script type="importmap"> ট্যাগ। এই ট্যাগটি আপনাকে বাহ্যিক মডিউল নামের একটি ম্যাপিংকে তাদের সংশ্লিষ্ট URL-এ সংজ্ঞায়িত করতে দেয়, যা আপনার কোডে বহিরাগত মডিউলগুলি অন্তর্ভুক্ত করা এবং ব্যবহার করা সহজ করে তোলে।
<script type="importmap"> পদ্ধতি ব্যবহার করতে, আপনাকে প্রথমে এটি আপনার HTML নথির <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-অ্যাক্সেস লাইব্রেরির URL-এ ম্যাপ করে। এই ম্যাপিংয়ের জায়গায়, আপনি এখন আপনার কোডে ব্রাউজার-এফএস-অ্যাক্সেস লাইব্রেরি অন্তর্ভুক্ত করতে 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>
<script type="importmap"> ট্যাগ এবং import কীওয়ার্ড ব্যবহার করা জাভাস্ক্রিপ্ট ডেভেলপমেন্টের জন্য পুরানো, অ-মডুলার পদ্ধতির তুলনায় বেশ কিছু সুবিধা প্রদান করে। এটি আপনাকে আপনার কোডের উপর নির্ভর করে এমন বাহ্যিক মডিউলগুলি স্পষ্টভাবে এবং স্পষ্টভাবে নির্দিষ্ট করতে দেয়, যা আপনার কোড বোঝা এবং বজায় রাখা সহজ করে তোলে। সামগ্রিকভাবে, <script type="importmap"> ট্যাগের সাথে ES মডিউল ব্যবহার করা হল ওয়েব অ্যাপ্লিকেশনগুলিতে JavaScript কোড অন্তর্ভুক্ত এবং পুনরায় ব্যবহার করার একটি আধুনিক এবং শক্তিশালী উপায়৷ আপনি নিম্নরূপ বৈশিষ্ট্য সনাক্ত করতে পারেন সমর্থন:
if (HTMLScriptElement.supports('importmap')) {
// The importmap feature is supported.
}
ব্রাউজার সমর্থন
- ৮৯
- ৮৯
- 108
- 16.4