Dinamik İçeriye Aktarma

Önceki bölümlerde ele aldığımız ifadelere içeri aktarım ve dışa aktarım ifadelerine “statik” denir.

Çünkü onlar gerçekten statik. Sözdizimi çok katıdır.

Birincisi, dinamik olarak import parametresini oluşturamıyoruz.

Modül yolu ilkel bir dize olmalı ve işlev çağrısı olamaz. Bu çalışmayacaktır:

import ... from getModuleName(); // Hata, sadece "string"den izin verilir.

İkincisi, koşullu veya çalışma zamanında içe aktaramıyoruz:

          if(...) {
  import ...; // Hata, izin verilmiyor!
}

{
  import ...; // Hata, içe aktarma işlemini herhangi bir bloğa koyamıyoruz.
}
        

Çünkü import/export kod yapısı için omurga sağlamayı hedefleriyor. Bu iyi bir şey, Kod yapısı analiz edilebildiğinden modüller toplanabilir ve birlikte paketlenebilir, kullanılmayan dışa aktarımlar kaldırılabilir (tree-shaken). Bu mümkün çünkü her şey sabit.

Ancak bir modülü dinamik ve isteğe bağlı olarak nasıl içeriye aktarırız?

import() Fonksiyonu

import(module) fonksiyonu her yerden çağrılabilir. Bir modül nesnesine çözümlenen bir söz verir.

Kullanım şekli şöyle görünür:

let modulePath = prompt("Module path?");

import(modulePath)
  .then(obj => <modül nesnesi>)
  .catch(err => <yükleme hatası, böyle bir modül yok?>)

Veya bir zaman async işlevi içindeyse let module = await import(modulePath) kullanabiliriz

Bunun gibi:

Sonuç

say.js

index.html

export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}

export default function() {
  alert("Module loaded (export default)!");
}

<!doctype html>
<script>
  async function load() {
    let say = await import('./say.js');
    say.hi(); // Hello!
    say.bye(); // Bye!
    say.default(); // Module loaded (export default)!
  }
</script>
<button onclick="load()">Click me</button>

Bu nedenle dinamik içe aktarım kullanımı çok basittir.

Ayrıca dinamik içeri aktarımlar düzenli komut dosyalarında çalışır, script type="module" gerektirmezler.

Dinamik İçeriye Aktarma

import() Fonksiyonu

Yorumlar

Bölüm

Ders menüsü