Dengan peta impor, mengimpor modul ES sekarang menjadi jauh lebih baik.
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