Peta impor JavaScript kini didukung lintas browser

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

Thomas Steiner

Modul ES adalah cara modern untuk menyertakan dan menggunakan kembali kode JavaScript dalam aplikasi web. Library ini didukung oleh browser modern dan memberikan beberapa manfaat dibandingkan pendekatan lama dan non-modular 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, yang mempermudah menyertakan dan menggunakan modul eksternal dalam kode Anda.

Untuk menggunakan pendekatan <script type="importmap">, Anda harus menambahkannya terlebih dahulu ke bagian <head> pada 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 penerapan 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 lama dan non-modular untuk pengembangan JavaScript. Dengan alat ini, Anda dapat menentukan dengan jelas dan eksplisit modul eksternal yang menjadi dependensi kode Anda, sehingga mempermudah pemahaman dan pengelolaan kode. Secara keseluruhan, menggunakan modul ES dengan tag <script type="importmap"> adalah cara yang modern dan canggih untuk menyertakan dan menggunakan kembali kode JavaScript di aplikasi web. Anda dapat mendeteksi dukungan sebagai berikut:

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

Dukungan Browser

  • 89
  • 89
  • 108
  • 16,4

Bacaan lebih lanjut