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

Условный

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

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

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

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

Динамический

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

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

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

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

Рассуждение

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Запрос необходимого вам модуля
Ожидание обещания вернуть модуль

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

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

Ответ 4

Теперь у нас есть предложение динамического импорта с ECMA. Это находится на этапе 3. Это также доступно как babel-preset.

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

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

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