Peta Import importmap
Petakan penentu modul ringkas kepada URL dengan importmap
Peta Import importmap ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Masalah Penentu Tanpa Awalan
Dalam Node, import "lodash" berfungsi kerana penyelesai mencari node_modules/lodash. Pelayar tidak mempunyai node_modules — pelayar memerlukan URL sebenar. Tanpa bantuan, import "lodash" menimbulkan ralat "Failed to resolve module specifier".
Fungsi Peta Import
Peta import mengisytiharkan kamus JSON yang memetakan penentu tanpa awalan (dan awalan URL) kepada URL sebenar. Pelayar merujuk peta tersebut semasa menyelesaikan modul, lalu menukar import "lodash" kepada pengambilan daripada URL yang anda konfigurasikan.
<script type="importmap">
{
"imports": {
"lodash": "https://esm.sh/lodash@4.17.21",
"preact": "https://esm.sh/preact"
}
}
</script>Urutan Pengisytiharan Penting
Peta import mesti muncul sebelum mana-mana <script type="module"> yang menggunakan penentu tanpa awalan — sebaik sahaja modul mula menyelesaikan import, peta itu dikunci. Letakkan <script type="importmap"> berhampiran bahagian atas <head>.
Pemetaan Awalan
Entri yang berakhir dengan tanda serong memadankan awalan URL: "@/": "/src/" memetakan sebarang import "@/utils/sum.js" kepada /src/utils/sum.js. Inilah cara anda mensimulasikan sintaks "alias" yang lazimnya disokong oleh penggabung.
Pengurusan Versi melalui Peta
Peta import memusatkan pilihan versi: tukar "react" daripada esm.sh/react@18 kepada esm.sh/react@19 di satu tempat, dan setiap modul yang mengimportnya akan menggunakan URL baharu. Tanpa peta import, setiap lokasi import mempunyai versinya sendiri yang ditulis secara tetap.
Skop
Kunci scopes membolehkan pemetaan yang berbeza untuk bahagian berlainan tapak anda. Dalam /admin/, anda mungkin mahukan versi kebergantungan yang lebih baharu berbanding dalam /public/; skop membolehkan anda menentukan sasaran berdasarkan laluan.
{
"imports": { "lodash": "https://esm.sh/lodash@4" },
"scopes": {
"/admin/": { "lodash": "https://esm.sh/lodash@5" }
}
}Satu Peta bagi Setiap Dokumen
Setiap dokumen boleh mempunyai paling banyak satu <script type="importmap">. Meletakkan dua peta pada halaman yang sama adalah tidak sah; gabungkan kandungannya ke dalam satu blok untuk menggabungkan entri.
Peta Import Luaran
Anda boleh mengehoskan peta di URL luaran menggunakan <script type="importmap" src="map.json">. Sokongan pelayar untuknya lebih baharu berbanding peta sebaris tetapi kini sudah meluas; ini berguna apabila anda mahu mencache peta yang besar secara berasingan daripada dokumen.
Menjana Peta Import
Alat seperti JSPM Generator dan mod --servedir esbuild menghasilkan peta import daripada package.json secara automatik. Peta yang dijana merangkumi setiap kebergantungan transitif dan memetakan setiap satunya kepada URL CDN — aliran kerja tanpa node_modules.
Sokongan Pelayar
Peta import tersedia dalam Chrome, Edge, Safari dan Firefox. Pelayar lama mengabaikan tag <script type="importmap">, yang menyebabkan penentu tanpa awalan gagal. Untuk sokongan luas bagi pelayar lama, bina dengan penggabung yang menyelesaikan penentu semasa masa binaan dan sediakan URL biasa.
Pilihan Lapisan Keserasian
Lapisan keserasian ES Module Shims (es-module-shims.js) menambah sokongan peta import — serta beberapa ciri yang lebih baharu — pada pelayar lama. Sertakannya sebelum skrip importmap anda. Kebanyakan projek moden melangkau lapisan keserasian dan bergantung pada sokongan asli.
Semakan Pengetahuan
Mengapakah <script type="importmap"> mesti muncul sebelum mana-mana skrip modul yang menggunakan penentu tanpa awalan?
Ringkasan
Peta import memetakan penentu tanpa awalan dan awalan URL kepada URL sebenar, lalu mengembalikan gaya "import lodash" seperti Node dalam pelayar. Isytiharkannya sekali bagi setiap dokumen sebelum mana-mana skrip modul, secara pilihan melalui src luaran, dengan skop untuk penggantian berdasarkan laluan. Gabungkannya dengan CDN (esm.sh, jsdelivr) untuk aliran kerja tanpa node_modules.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Peta Import importmap” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Peta Import importmap”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Peta Import importmap”?
Petakan penentu modul ringkas kepada URL dengan importmap Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Peta Import importmap” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Skrip Modul ES type=module
- Peta Import importmap
- Import Dinamik dalam Modul
- Asas Persekutuan Modul