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

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

תמיכה בדפדפן

  • 89
  • 89
  • 108
  • 16.4

קריאה נוספת