ES6: условные и динамические операции импорта

Question

Условные

Возможно ли иметь условные операторы импорта, как показано ниже?

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

Я пробовал вышеуказанное, но при компиляции получаю следующую ошибку (из Babel).

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

Dynamic

Можно ли иметь динамические операторы импорта, как показано ниже?

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

Вышеприведенная процедура получает ту же ошибку от Babel во время компиляции.

Можно ли это сделать или есть что-то, что мне не хватает?

Рассуждая

Причины Я пытаюсь сделать это, что у меня есть много импорта для ряда «страниц», и они следуют той же схеме. Я хотел бы очистить мою базу кода, импортировав эти файлы с помощью динамического цикла.

Если это невозможно, существует ли лучший способ обработки большого количества импорта в ES6?

Answer 1

Динамически не удается разрешить ваши зависимости, так как imports предназначены для статического анализа. Тем не менее, вы, вероятно, можете использовать некоторые require здесь, что-то вроде:

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

Answer 2

Требует не решит вашу проблему, так как это синхронный вызов. Есть несколько вариантов, и все они связаны с

1. Просить модуль вам необходимо
2. Ожидания обещания возвратить модуль

В ECMA Script есть поддержка для ленивых модулей загрузки с использованием SystemJS. Разумеется, это не поддерживается во всех браузерах, поэтому вы можете использовать JSPM или прошивку SystemJS.

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

Answer 3

Мы имеем динамический импорт предложение теперь с ECMA. Это находится на стадии 2. Это также доступно как babel-preset.

Ниже приведен способ выполнения условного рендеринга в соответствии с вашим случаем.

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

Это в основном возвращает обещание. Ожидается, что ожидается, что модуль обещания получит модуль. В предложении также есть такие вещи, как множественный динамический импорт, импорт по умолчанию, импорт файла js и т. Д. Вы можете найти дополнительную информацию о dynamic imports here.