Halaman ini diterjemahkan oleh Cloud Translation API.

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 di aplikasi web. API ini didukung oleh browser modern dan memberikan beberapa manfaat dibandingkan pendekatan non-modular 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 untuk menyertakan dan menggunakan modul eksternal dalam kode Anda.

Untuk menggunakan pendekatan <script type="importmap">, Anda harus menambahkannya terlebih dahulu ke bagian <head> dalam dokumen HTML. Di dalam tag, Anda dapat menentukan objek JSON yang memetakan nama modul ke URL-nya 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 memetakan 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 dengan pendekatan non-modular yang lebih lama untuk pengembangan JavaScript. Hal ini memungkinkan Anda menentukan modul eksternal yang menjadi dependensi kode dengan jelas dan eksplisit, sehingga mempermudah pemahaman dan pengelolaan kode. Secara keseluruhan, menggunakan modul ES dengan tag <script type="importmap"> adalah cara yang modern dan andal untuk menyertakan dan menggunakan kembali kode JavaScript di aplikasi web. Anda dapat mendukung deteksi fitur sebagai berikut:

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

Dukungan Browser

Peta impor JavaScript kini didukung lintas browser

Bacaan lebih lanjut