0Pricing
JavaScript Academy · Ders

ESM Yükleyici Tuhaflıkları, Yol/URL Farkları

URL'leri güvenle çözümleyin, göreli ve yalın belirteçleri anlayın ve dosya URL'lerinin web URL'lerinden nasıl farklı olduğunu görün. Küçük, çalıştırılabilir demolar.

ESM Yükleyici Tuhaflıkları, Yol/URL Farkları, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 3 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 3 dersten oluşur.

Genel bakış

Amaç: Ortamlar arasında yolları güvenli biçimde çözümleyin.

  • Göreli yolları çözümlemek için URL oluşturucusunu kullanın
  • Göreli ve yalın belirteçler arasındaki farkı bilin
  • file: ile https: arasındaki farkları görün
  • Yollar için kırılgan metin birleştirmelerinden kaçının
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 1

Tabana göre göreli yol

new URL(relative, base), yol parçalarını ve eğik çizgileri doğru biçimde işler.

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 2

.. ile normalleştirme

Oluşturucu, ../ ifadesini doğru biçimde kaldırır; bu nedenle elle metin hileleri yapmanız gerekmez.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 3

file: URL kullanımı

file: URL'leri Node benzeri bağlamlarda yerel dosyalara işaret eder; tarayıcılar kullanıcı eylemi olmadan bunları doğrudan okuyamaz.

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 4

Belirteç türleri

ESM yükleyicileri yalın belirteçleri göreli veya mutlak URL'lerden farklı ele alır. Türü bilmek yardımcı olur.

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 5

Yeni başlayanlara uygun alışkanlıklar

İpuçları:

  • Metin birleştirme yerine URL(relative, base) kullanmayı tercih edin.
  • Yalın ve göreli belirteçler arasındaki farkı anlayın.
  • Tarayıcıda dosyaların var olduğunu varsaymaktan kaçının.
  • Yeni başlayanlar için yolları kısa ve okunabilir tutun.
ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 6

URL çözümleme temelleri sınavı

Hızlı kontrol: Güvenli biçimde URL oluşturun.

ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 7

Özet

Özet: Göreli yolları (./, ../) çözümlemek için URL oluşturucusunu kullanın, yalın ve göreli belirteçleri ayırt edin ve file: URL'lerinin web URL'lerinden farklı olduğunu unutmayın.

ESM Yükleyici Tuhaflıkları, Yol/URL Farkları — resim 8

Sıkça Sorulan Sorular

“ESM Yükleyici Tuhaflıkları, Yol/URL Farkları” dersi ücretsiz mi?

Evet — “ESM Yükleyici Tuhaflıkları, Yol/URL Farkları” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 3 dersten oluşur.

“ESM Yükleyici Tuhaflıkları, Yol/URL Farkları” dersinde ne öğreneceğim?

URL'leri güvenle çözümleyin, göreli ve yalın belirteçleri anlayın ve dosya URL'lerinin web URL'lerinden nasıl farklı olduğunu görün. Küçük, çalıştırılabilir demolar. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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, 3 dersinin 2. dersidir.

“ESM Yükleyici Tuhaflıkları, Yol/URL Farkları” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

  1. Global'ler, fetch Kullanılabilirliği, Dosya/Ağ API'leri
  2. ESM Yükleyici Tuhaflıkları, Yol/URL Farkları
  3. Ortam Değişkenleri ve Yapılandırma Kalıpları
← JavaScript Academy Sayfasına Dön