javascript - videos - jquery falcon master

ES6: declaraciones de importación condicionales y dinámicas

Question

Condicional

¿Es posible tener declaraciones de importación condicional como a continuación?

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

He intentado lo anterior pero aparece el siguiente error (de Babel) al compilar.

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

Dinámica

¿Es posible tener declaraciones de importación dinámicas como a continuación?

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

Lo anterior recibe el mismo error de Babel durante la compilación.

¿Es esto posible o hay algo que me falta?

Razonamiento

La razón por la que trato de hacer esto es porque tengo muchas importaciones para varias "páginas" y siguen un patrón similar. Me gustaría limpiar mi base de código importando estos archivos con un bucle dinámico para.

Si esto no es posible, ¿hay una mejor manera de manejar un gran número de importaciones en ES6?

Answer 1

No puede resolver dinámicamente sus dependencias, ya que las imports están destinadas al análisis estático. Sin embargo, probablemente pueda usar algunos require aquí, algo como:

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

Answer 2

Requerir no resolverá su problema, ya que es una llamada síncrona. Hay varias opciones y todas implican

1. Preguntando por el módulo que necesitas
2. Esperando una promesa de devolver el módulo

En ECMA Script hay soporte para módulos de carga diferida usando SystemJS. Por supuesto, esto no es compatible con todos los navegadores, por lo tanto, mientras tanto, puede usar JSPM o un calce SystemJS.

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

Answer 3

Tenemos una propuesta dinámica de importaciones ahora con ECMA. Esto está en la etapa 2. Esto también está disponible como babel-preset .

A continuación se muestra una forma de hacer una representación condicional según su caso.

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

Esto básicamente devuelve una promesa. Se espera que la resolución de promesa tenga el módulo. La propuesta también tiene cosas como importaciones dinámicas múltiples, importaciones predeterminadas, importación de archivos js, etc. Puede encontrar más información sobre importaciones dinámicas aquí .