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