أصبحت خرائط استيراد 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 المُستضافة على شبكة Unpkg CDN. بعد تنفيذ هذا التعيين، يمكنك الآن استخدام الكلمة الرئيسية 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

محتوى إضافي للقراءة