تمت ترجمة هذه الصفحة بواسطة 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 متاحة الآن على جميع المتصفّحات