Peta impor JavaScript kini didukung lintas browser

Dengan peta impor, mengimpor modul ES kini menjadi jauh lebih baik.

Thomas Steiner

Modul ES adalah cara modern untuk menyertakan dan menggunakan kembali kode JavaScript dalam aplikasi web. Modul didukung oleh browser modern dan memberikan beberapa manfaat dibandingkan pendekatan non-modular yang lebih lama untuk pengembangan JavaScript.

Cara modern untuk menggunakan modul ES adalah dengan tag <script type="importmap">. Tag ini memungkinkan Anda menentukan pemetaan nama modul eksternal ke URL yang sesuai, sehingga memudahkan penyertaan dan penggunaan modul eksternal dalam kode Anda.

Untuk menggunakan pendekatan <script type="importmap">, Anda harus menambahkannya terlebih dahulu ke bagian <head> dokumen HTML Anda. Di dalam tag, Anda dapat menentukan objek JSON yang memetakan nama modul ke URL yang sesuai. Misalnya:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

Kode ini menentukan satu modul eksternal bernama "browser-fs-access" dan memetakannya ke URL library browser-fs-access, yang dihosting di CDN unpkg. Dengan pemetaan ini, Anda kini dapat menggunakan kata kunci import untuk menyertakan library browser-fs-access dalam kode Anda. Perhatikan bahwa kata kunci import hanya tersedia di dalam tag script dengan atribut 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>

Penggunaan tag <script type="importmap"> dan kata kunci import memberikan beberapa manfaat dibandingkan pendekatan pengembangan JavaScript yang lebih lama dan non-modular. Hal ini memungkinkan Anda menentukan modul eksternal yang menjadi dependensi kode Anda secara jelas dan eksplisit, sehingga kode Anda lebih mudah dipahami dan dikelola. Secara keseluruhan, penggunaan modul ES dengan tag <script type="importmap"> adalah cara modern dan efektif untuk menyertakan dan menggunakan kembali kode JavaScript dalam aplikasi web. Anda dapat mendeteksi dukungan fitur sebagai berikut:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 108.
  • Safari: 16.4.

Source

Bacaan lebih lanjut