ES6: Koşullu ve Dinamik İçe Aktarım İfadeleri

Question

Koşullu

Aşağıdaki gibi koşullu içe aktarma ifadeleri kullanmak mümkün mü?

if (foo === bar) { 
    import Baz from './Baz'; 
} 

Yukarıdakileri denedim ama derlerken aşağıdaki hatayı (Babel'den) aldım.

'import' and 'export' may only appear at the top level 

Dinamik

dinamik ithalat ifadeleri aşağıda gibi olması mümkün mü?

for (let foo in bar) { 
    if (bar.hasOwnProperty(foo)) { 
     import Baz from `./${foo}`; 
    } 
} 

Yukarıdakiler, derleme sırasında Babel'den aynı hatayı alır.

Bu, eksik bir şey yapmak veya yapmak mümkün mü?

Akıl Yürütme

Bunu yapmaya çalışıyorum sebebi "sayfalar" bir dizi ithalat çok şey var ve bunlar da aynı yolu izler olmasıdır. Bu dosyaları dinamik bir döngü ile içe aktararak kod tabanımı temizlemek istiyorum.

Bu mümkün değilse, ES6'da çok sayıda ithalatı işlemenin daha iyi bir yolu var mı?

Answer 1

imports statik analize yönelik olarak bağımlılıklarınızı dinamik olarak çözemezsiniz.

for (let foo in bar) { 
    if (bar.hasOwnProperty(foo)) { 
     const Baz = require(foo).Baz; 
    } 
} 

Answer 2

o senkron arama gibi sorunu çözmez gerektir: Ancak, muhtemelen, burada böyle bir şey bazı require kullanabilirsiniz. Bir çok seçenek bulunmaktadır ve hepsi size SystemJS kullanarak geç yükleme modülleri için destek var ECMA Betiğinde modülünü

dönmek için bir söz bekliyorum

ihtiyaç modül için sorma

1. içerir. Bu elbette tüm tarayıcılarda desteklenmez, bu nedenle JSPM veya SystemJS shim'i kullanabilirsiniz.

   https://github.com/ModuleLoader/es6-module-loader

Answer 3

Biz ECMA ile artık dinamik ithalat teklifi var. Bu 2. aşamadadır. Bu, babel-preset olarak da mevcuttur.

Aşağıda, duruma göre koşullu oluşturma işlemi gerçekleştirilmektedir.

if (foo === bar) { 
    import('./Baz') 
    .then((Baz) => { 
     console.log(Baz.Baz); 
    }); 
} 

Bu temel olarak bir söz verir. Sözün kararının, modülün olması bekleniyor. Teklif aynı zamanda birden fazla dinamik ithalat, varsayılan ithalat, js dosyası içe aktarma vb. Gibi özelliklere de sahiptir. dynamic imports here hakkında daha fazla bilgi edinebilirsiniz.