نقشه های واردات جاوا اسکریپت اکنون از طریق مرورگرهای متقابل پشتیبانی می شوند

با واردات نقشه ها، وارد کردن ماژول های ES اکنون بسیار بهتر می شود.

توماس اشتاینر

ماژول های ES روشی مدرن برای گنجاندن و استفاده مجدد کد جاوا اسکریپت در برنامه های کاربردی وب هستند. آنها توسط مرورگرهای مدرن پشتیبانی می شوند و مزایای متعددی را نسبت به رویکردهای قدیمی و غیر ماژولار برای توسعه جاوا اسکریپت ارائه می دهند.

یک روش مدرن برای استفاده از ماژول‌های ES با تگ <script type="importmap"> است. این تگ به شما امکان می دهد نگاشت نام ماژول های خارجی را به URL های مربوطه آنها تعریف کنید، که باعث می شود گنجاندن و استفاده از ماژول های خارجی در کد شما آسان تر شود.

برای استفاده از رویکرد <script type="importmap"> ، ابتدا باید آن را به بخش <head> سند HTML خود اضافه کنید. در داخل تگ، می‌توانید یک شی JSON تعریف کنید که نام ماژول‌ها را به URLهای متناظر آنها نگاشت می‌کند. مثلا:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

این کد یک ماژول خارجی منفرد به نام "browser-fs-access" را تعریف می کند و آن را به URL کتابخانه مرورگر-fs-access ، که در CDN unpkg میزبانی می شود، ترسیم می کند. با این نقشه برداری، اکنون می توانید از کلمه کلیدی import برای گنجاندن کتابخانه مرورگر-fs-access در کد خود استفاده کنید. توجه داشته باشید که کلمه کلیدی 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 مزایای متعددی را نسبت به رویکردهای قدیمی‌تر و غیر ماژولار برای توسعه جاوا اسکریپت ارائه می‌کند. به شما این امکان را می دهد که به طور واضح و صریح ماژول های خارجی که کد شما به آنها وابسته است را مشخص کنید، که درک و حفظ کد شما را آسان تر می کند. به طور کلی، استفاده از ماژول‌های ES با تگ <script type="importmap"> روشی مدرن و قدرتمند برای گنجاندن و استفاده مجدد از کد جاوا اسکریپت در برنامه‌های کاربردی وب است. می توانید پشتیبانی از ویژگی های زیر را شناسایی کنید:

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

پشتیبانی مرورگر

  • 89
  • 89
  • 108
  • 16.4

بیشتر خواندن