ES6: dichiarazioni di importazione condizionale e dinamica

Question

Condizionale

È possibile avere istruzioni di importazione condizionale come di seguito?

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

Ho provato quanto sopra, ma durante la compilazione ho ricevuto il seguente errore (da Babel).

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

dinamica

E 'possibile avere dichiarazioni dinamiche di importazione come qui di seguito?

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

Quanto sopra riceve lo stesso errore da Babel durante la compilazione.

È possibile fare o c'è qualcosa che mi manca?

Ragionamento

Il motivo che sto cercando di fare questo è che ho un sacco di importazioni per un certo numero di "pagine" e seguono un modello simile. Vorrei pulire il mio codice base importando questi file con un ciclo dinamico per.

Se ciò non è possibile, esiste un modo migliore per gestire un numero elevato di importazioni in ES6?

Answer 1

Non è possibile risolvere dinamicamente le proprie dipendenze, poiché imports sono destinate all'analisi statica. Tuttavia, probabilmente si può utilizzare alcuni require qui, qualcosa di simile:

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

Answer 2

Richiede non risolverà il vostro problema in quanto è una chiamata sincrona. Ci sono diverse opzioni e tutti implicano

1. Chiedendo per il modulo è necessario
2. In attesa di una promessa di tornare al modulo

In ECMA Script v'è il supporto per il caricamento dei moduli pigri utilizzando SystemJS. Questo ovviamente non è supportato in tutti i browser, quindi nel frattempo è possibile utilizzare JSPM o uno shim SystemJS.

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

Answer 3

Abbiamo proposta importazioni dinamica ora con ECMA. Questo è in fase 2. Questo è disponibile anche come babel-preset.

Di seguito è riportato un modo per eseguire il rendering condizionale secondo il caso.

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

Questo sostanzialmente restituisce una promessa. Si prevede che la risoluzione della promessa abbia il modulo. La proposta ha anche cose come importazioni dinamiche multiple, importazioni di default, importazione di file js ecc. Puoi trovare ulteriori informazioni su dynamic imports here.