HTML Academy · Ders

ES Modül Betikleri: type=module

JavaScript'i type=module ile ES modülleri olarak yükleyin

ES Modül Betikleri: type=module, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. 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.

ES Modülleri Nedir?

ES modülü, import ve export bildirimlerini kullanan bir JavaScript dosyasıdır. Modüllerin kendi kapsamları vardır (genel kapsamı kirletmezler), varsayılan olarak katı kipte çalışırlar ve bağımlılıkları açıkça belirtilir; böylece betik etiketi sıralamasının onlarca yıllık sorunları çözülür.

Modül Betik Etiketi

<script type="module" src="app.js">, tarayıcıya dosyanın bir modül olduğunu bildirir. Tarayıcı içe aktarmaları ayrıştırır, bağımlılıkları paralel olarak getirir ve ancak bağımlılık grafiğinin tamamı indirilip derlendikten sonra giriş modülünü çalıştırır.

<script type="module" src="app.js"></script>

Modüller Ertelenir

Modül betikleri, sanki defer belirtilmiş gibi davranır: HTML ayrıştırılırken paralel olarak indirilir ve ayrıştırma tamamlandıktan sonra bildirim sırasına göre çalıştırılır. <script type="module"> öğesini herhangi bir yere (hatta <head> içine) yerleştirebilirsiniz; sayfayı engellemez.

İçe Aktarmalar Belirticiler Kullanır

Bir içe aktarma bildirimi bir belirtici kullanır: göreli bir URL (./utils.js), mutlak bir URL (https://cdn.example.com/lib.js) veya yalın bir ad (lodash). Yalın adlar, tarayıcı bunların hangi dosyaya karşılık geldiğini bilmediği için bir içe aktarma haritası gerektirir (bu konu bir sonraki bölümde ele alınacaktır).

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

Dosya Uzantıları Gereklidir

Tarayıcılar, içe aktarma belirticilerine otomatik olarak .js eklemez. import "./utils" başarısız olur; import "./utils.js" çalışır. Paketleyiciler ve Node daha hoşgörülü olabilir; tarayıcı katıdır, bu nedenle uzantıyı açıkça yazın.

CORS Gereklidir

Modüller, aynı kaynaklı olsalar bile her zaman CORS kullanılarak getirilir. Farklı kaynaklardaki modül dosyalarının uygun Access-Control-Allow-Origin başlığını sunması gerekir; aksi halde içe aktarma başarısız olur. Çoğu CDN (esm.sh, jsdelivr, unpkg) bunu kullanıma hazır şekilde doğru yapılandırır.

Üst Düzey Bekleme

Modüller, en üst düzeyde await kullanımını destekler; eşzamansız işlev sarmalayıcısı gerekmez: const data = await fetch("/api").then(r => r.json()). Modülü kullananlar, çalıştırılmadan önce üst düzey beklemenin tamamlanmasını bekler.

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

Modüller Tekil Örneklerdir

Bir modül, kaç farklı modül tarafından içe aktarılırsa aktarılsın oturum başına tam olarak bir kez değerlendirilir. Dışa aktarımlar nesnesi paylaşılır; her kullanıcı aynı örneği görür. Bu da modülleri yapılandırma nesnesi veya durum deposu gibi tekil örnekleri paylaşmak için temiz bir yöntem haline getirir.

Satır İçi Modüller

Modülleri satır içinde de yazabilirsiniz: <script type="module">import x from "./y.js"; ...</script>. Bu yöntem başlangıç kodu veya deneyler için kullanışlıdır; ancak harici dosyaların hatalarını ayıklamak ve bunları önbelleğe almak daha kolaydır.

Eski Sürümler İçin nomodule Geri Dönüşü

Bir <script type="module"> öğesini <script nomodule src="legacy.js"> ile birlikte kullanın. Modern tarayıcılar modülü çalıştırır ve nomodule betiğini yok sayar; eski tarayıcılar nomodule betiğini çalıştırır ve modülü yok sayar. Bu yöntem, uygulamaların tamamen ESM kullanımına geçişi sırasında kullanılır.

Hatalar ve İçe Aktarma Başarısızlıkları

Başarısız olan bir içe aktarma (404, CORS, söz dizimi hatası) hata fırlatır ve tüm modül grafiğinin çalıştırılmasını engeller. Başarısız modül isteklerini görmek için Ağ panelini, gerçek içe aktarma hata mesajını okumak için Konsol'u kullanın.

Bilginizi Sınayın

Modül betikleri, siz belirtmediğiniz halde neden erteleme ayarı yapılmış gibi davranır?

Özet

Sıkça Sorulan Sorular

“ES Modül Betikleri: type=module” dersi ücretsiz mi?

Evet — “ES Modül Betikleri: type=module” 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.

“ES Modül Betikleri: type=module” dersinde ne öğreneceğim?

JavaScript'i type=module ile ES modülleri olarak yükleyin 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 1. dersidir.

“ES Modül Betikleri: type=module” 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