HTML Academy · Pelajaran

Peta Impor importmap

Petakan penentu modul singkat ke URL dengan importmap.

Peta Impor importmap adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Masalah Penentu Polos

Di Node, import "lodash" berfungsi karena penyelesai menemukan node_modules/lodash. Peramban tidak memiliki node_modules—peramban memerlukan URL nyata. Tanpa bantuan, import "lodash" menimbulkan kesalahan "Gagal menyelesaikan penentu modul".

Fungsi Peta Impor

Peta impor mendeklarasikan kamus JSON yang memetakan penentu polos (dan awalan URL) ke URL nyata. Peramban memeriksa peta tersebut saat menyelesaikan modul, lalu mengubah import "lodash" menjadi pengambilan dari URL yang Anda konfigurasikan.

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

Urutan Deklarasi Penting

Peta impor harus muncul sebelum <script type="module"> mana pun yang menggunakan penentu polos—setelah sebuah modul mulai menyelesaikan impor, peta tersebut tidak dapat diubah. Tempatkan <script type="importmap"> di dekat bagian atas <head>.

Pemetaan Awalan

Entri dengan garis miring di akhir mencocokkan awalan URL: "@/": "/src/" memetakan setiap import "@/utils/sum.js" ke /src/utils/sum.js. Inilah cara menyimulasikan sintaks "alias" yang umumnya didukung oleh pengemas.

Pemberian Versi melalui Peta

Peta impor memusatkan pilihan versi: ubah "react" dari esm.sh/react@18 menjadi esm.sh/react@19 di satu tempat, dan setiap modul pengimpor akan menggunakan URL baru tersebut. Tanpa peta impor, setiap lokasi impor memiliki versi yang ditulis langsung secara terpisah.

Cakupan

Kunci scopes memungkinkan pemetaan yang berbeda untuk berbagai bagian situs Anda. Di dalam /admin/, Anda mungkin menginginkan versi dependensi yang lebih baru daripada di dalam /public/; cakupan memungkinkan Anda menargetkan berdasarkan jalur.

{
  "imports": { "lodash": "https://esm.sh/lodash@4" },
  "scopes": {
    "/admin/": { "lodash": "https://esm.sh/lodash@5" }
  }
}

Satu Peta per Dokumen

Setiap dokumen dapat memiliki paling banyak satu <script type="importmap">. Menempatkan dua peta pada halaman yang sama tidak valid; gabungkan isinya ke dalam satu blok untuk menggabungkan semua entri.

Peta Impor Eksternal

Anda dapat meng-host peta tersebut di URL eksternal dengan <script type="importmap" src="map.json">. Dukungan peramban untuk cara ini lebih baru daripada peta sebaris, tetapi sekarang sudah luas; cara ini berguna jika Anda ingin menyimpan peta besar dalam tembolok secara terpisah dari dokumen.

Membuat Peta Impor

Alat seperti JSPM Generator dan mode --servedir milik esbuild secara otomatis menghasilkan peta impor dari package.json. Peta yang dihasilkan mencakup setiap dependensi transitif dan memetakan masing-masing ke URL CDN—alur kerja tanpa node_modules.

Dukungan Peramban

Peta impor tersedia di Chrome, Edge, Safari, dan Firefox. Peramban lama mengabaikan tag <script type="importmap">, sehingga penentu polos gagal. Untuk dukungan luas pada peramban lama, buat aplikasi dengan pengemas yang menyelesaikan penentu saat proses pembuatan, lalu sajikan URL biasa.

Opsi Pengisi Kompatibilitas

Pengisi kompatibilitas ES Module Shims (es-module-shims.js) menambahkan dukungan peta impor—serta beberapa fitur baru lainnya—ke peramban lama. Sertakan pengisi tersebut sebelum skrip peta impor. Sebagian besar proyek modern melewati pengisi ini dan mengandalkan dukungan bawaan.

Pemeriksaan Pemahaman

Mengapa <script type="importmap"> harus muncul sebelum skrip modul mana pun yang menggunakan penentu polos?

Ringkasan

Peta impor memetakan penentu polos dan awalan URL ke URL nyata, sehingga memulihkan gaya "import lodash" dari Node di peramban. Deklarasikan peta tersebut sekali per dokumen sebelum skrip modul apa pun, atau secara opsional dari luar melalui src, dengan cakupan untuk penggantian berdasarkan jalur. Gabungkan dengan CDN (esm.sh, jsdelivr) untuk alur kerja tanpa node_modules.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Peta Impor importmap” gratis?

Ya — teks lengkap “Peta Impor importmap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Peta Impor importmap”?

Petakan penentu modul singkat ke URL dengan importmap. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Peta Impor importmap” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy