דף זה תורגם על ידי Cloud Translation API.

מפות ייבוא JavaScript נתמכות כעת בדפדפנים שונים

בעזרת מפות ייבוא, ייבוא מודולים של ES הופך להיות הרבה יותר טוב.

Thomas Steiner

מודולים של ES הם דרך מודרנית לכלול קוד JavaScript באפליקציות אינטרנט ולעשות בו שימוש חוזר. הדפדפנים המודרניים תומכים בהם, והם מספקים כמה יתרונות על פני גישות ישנות יותר לפיתוח JavaScript, שלא מבוססות על מודולים.

דרך מודרנית להשתמש במודולים של 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 של הספרייה browser-fs-access, שמתארח ב-CDN של unpkg. אחרי שמבצעים את המיפוי הזה, אפשר להשתמש במילת המפתח import כדי לכלול את הספרייה browser-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 מספק כמה יתרונות בהשוואה לגישה הקודמת לפיתוח JavaScript, שהיא לא מודולרית. היא מאפשרת לציין בבירור ובאופן מפורש את המודולים החיצוניים שהקוד תלוי בהם, וכך קל יותר להבין ולתחזק את הקוד. באופן כללי, השימוש במודולים של ES עם התג <script type="importmap"> הוא דרך מודרנית ויעילה לכלול קוד JavaScript ולהשתמש בו באפליקציות אינטרנט. אפשר להוסיף תמיכה בזיהוי תכונות באופן הבא:

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

תמיכה בדפדפנים

מפות ייבוא JavaScript נתמכות כעת בדפדפנים שונים

קריאה נוספת