HTML Academy · Ders

İçe Aktarma Haritaları: importmap

Yalın modül belirteçlerini importmap ile URL'lere eşleyin

İçe Aktarma Haritaları: importmap, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Yalın Belirtici Sorunu

Node'da import "lodash" çalışır; çünkü çözümleyici node_modules/lodash konumunu bulur. Tarayıcılarda node_modules yoktur; gerçek bir URL gerekir. Yardım olmadan import "lodash", "Modül belirticisi çözümlenemedi" hatasını fırlatır.

İçe Aktarma Haritaları Ne Yapar

Bir içe aktarma haritası, yalın belirticileri (ve URL öneklerini) gerçek URL'lerle eşleştiren bir JSON sözlüğü tanımlar. Tarayıcı, modül çözümleme sırasında haritaya bakarak import "lodash" ifadesini yapılandırdığınız URL'den yapılacak bir getirme işlemine dönüştürür.

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

Bildirim Sırası Önemlidir

İçe aktarma haritası, yalın belirticiler kullanan herhangi bir <script type="module"> öğesinden önce gelmelidir; bir modül içe aktarmaları çözümlemeye başladıktan sonra harita kilitlenir. <script type="importmap"> öğesini <head> bölümünün üst tarafına yakın bir yere yerleştirin.

Önek Eşlemeleri

Sonunda eğik çizgi bulunan girdiler URL önekleriyle eşleşir: "@/": "/src/", import "@/utils/sum.js" ifadesini /src/utils/sum.js konumuna eşler. Paketleyicilerin yaygın olarak desteklediği "alias" söz dizimini bu şekilde taklit edebilirsiniz.

Harita Üzerinden Sürümleme

Bir içe aktarma haritası sürüm seçimlerini merkezileştirir: "react" eşlemesini esm.sh/react@18'den esm.sh/react@19'a tek bir yerde değiştirin; içe aktarma yapan her modül yeni URL'yi kullanır. İçe aktarma haritası olmadan her içe aktarma konumu kendi sürümünü sabit kodlar.

Kapsamlar

scopes anahtarı, sitenizin farklı bölümleri için farklı eşlemeler kullanmanıza olanak tanır. /admin/ içinde /public/ bölümündekinden daha yeni bir bağımlılık sürümü isteyebilirsiniz; kapsamlar, yolu temel alarak hedef belirlemenizi sağlar.

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

Belge Başına Bir Harita

Her belgede en fazla bir <script type="importmap"> bulunabilir. Aynı sayfaya iki tane yerleştirmek geçersizdir; girdileri birleştirmek için içeriklerini tek bir blokta birleştirin.

Harici İçe Aktarma Haritaları

Haritayı <script type="importmap" src="map.json"> ile harici bir URL'de barındırabilirsiniz. Tarayıcı desteği satır içi haritalardan daha yenidir, ancak artık yaygındır; büyük bir haritayı belgeden ayrı olarak önbelleğe almak istediğinizde kullanışlıdır.

İçe Aktarma Haritaları Oluşturma

JSPM Generator ve esbuild'in --servedir modu, package.json dosyasından otomatik olarak içe aktarma haritaları üretir. Oluşturulan haritalar, her geçişli bağımlılığı bir CDN URL'sine eşleyerek node_modules içermeyen bir iş akışı sağlar.

Tarayıcı Desteği

İçe aktarma haritaları Chrome, Edge, Safari ve Firefox'ta yerleşik olarak desteklenir. Eski tarayıcılar <script type="importmap"> etiketini yok sayar; bu da yalın belirticilerin başarısız olması anlamına gelir. Geniş eski sürüm desteği için belirticileri derleme zamanında çözen bir paketleyiciyle derleyin ve doğrudan URL'ler sunun.

Uyumluluk Dolgusu Seçeneği

ES Module Shims uyumluluk dolgusu (es-module-shims.js), içe aktarma haritası desteğini ve daha yeni birkaç özelliği eski tarayıcılara ekler. Bunu importmap betiğinizden önce ekleyin. Modern projelerin çoğu uyumluluk dolgusunu atlar ve yerel desteğe güvenir.

Bilginizi Sınayın

Özet

İçe aktarma haritaları, yalın belirticileri ve URL öneklerini gerçek URL'lere eşleyerek tarayıcıda node tarzı "import lodash" kullanımını yeniden sağlar. Haritaları belge başına bir kez, herhangi bir modül betiğinden önce tanımlayın; isterseniz src aracılığıyla harici olarak da tanımlayabilirsiniz. Yol başına geçersiz kılmalar için kapsamları kullanın. node_modules içermeyen bir iş akışı için bunları bir CDN (esm.sh, jsdelivr) ile birleştirin.

Sıkça Sorulan Sorular

“İçe Aktarma Haritaları: importmap” dersi ücretsiz mi?

Evet — “İçe Aktarma Haritaları: importmap” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“İçe Aktarma Haritaları: importmap” dersinde ne öğreneceğim?

Yalın modül belirteçlerini importmap ile URL'lere eşleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“İçe Aktarma Haritaları: importmap” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön