تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

أصبحت خرائط استيراد JavaScript متاحة الآن على جميع المتصفّحات

باستخدام خرائط الاستيراد، أصبح استيراد وحدات ES أفضل بكثير.

Thomas Steiner

وحدات ES هي طريقة حديثة لتضمين رمز JavaScript وإعادة استخدامه في تطبيقات الويب. تتوافق هذه الأدوات مع المتصفّحات الحديثة وتوفّر مزايا عديدة مقارنةً بالأساليب القديمة غير النموذجية لتطوير JavaScript.

هناك طريقة حديثة لاستخدام وحدات اللغة الإسبانية، وهي من خلال العلامة <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 متاحة الآن على جميع المتصفّحات

مراجع إضافية