דף זה תורגם על ידי 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.
}

Browser Support

Source

מפות ייבוא JavaScript נתמכות כעת בדפדפנים שונים קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

קריאה נוספת

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