Özet - ES modülleri

JavaScript kursu · İleri seviye · Ders 6/100

Dynamic import ve re-export kullanarak tembel yüklenen bir modül yapısını oluşturursun.

Özet - ES modülleri

Bu grupta ES modüllerinin ileri özelliklerini gördün: await import() ile çalışma anında yükleme, as ile yeniden adlandırma, export ... from ile re-export, import.meta ile modül bilgisi ve import maps ile ad çözme.

Bunları bir arada kullanarak büyük uygulamaları küçük parçalara bölebilir, yalnızca gerektiğinde kod yükleyebilir ve dış kütüphaneleri kısa adlarla çağırabilirsin.

Uygulama Modülü çalışma anında yükle ve kullan

./report.js modülünü await import() ile çalışma anında yükle ve report değişkenine ata. Sonra report.build() çağrısının sonucunu console.log ile yazdır.

Örnek çözümü göster

await import ile yükle, report'a ata, build'i çağır.
Örnek çözüm:
const report = await import('./report.js');
console.log(report.build());

Birleştirici örnek

Bir barrel modülü, re-export ile değerleri toplar; tüketici istediği değerleri tek girişten alır. Ağır bir parça yalnızca gerektiğinde await import() ile yüklenir.

// index.js
export { login } from './user.js';
// app.js
const user = await import('./index.js');

Böylece hem dağıtım tek yerde toplanır hem de ağır kod ilk yüklemede gelmez.

Uygulama İki modüllü barrel yaz

Bir index.js barrel modülü yaz. ./user.js modülünden login değerini, ./session.js modülünden token değerini export ... from ile ayrı satırlarda aktar.

Örnek çözümü göster

İki ayrı export ... from satırı yaz.
Örnek çözüm:
export { login } from './user.js';
export { token } from './session.js';

Kendini test et

Bir modülü yalnızca gerektiğinde yüklemek için en uygun yöntem hangisidir?
- await import('./m.js')
- import { x } from './m.js'
- export { x } from './m.js'
- import.meta.url
Cevabı göster

await import('./m.js') — Doğru! await import() modülü çağrı anında yükler.
Özellikleri eşleştir

await import()

tembel yükler
as

yeniden adlandırır
export ... from

aktarır
import.meta.url

adresi verir

Özet - ES modülleri