Условный импорт модулей ES6

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

Изначально пользователь пытался использовать условные операторы для импорта модуля, но это привело к ошибке SyntaxError. Затем пользователь исследовал использование System.import, но столкнулся с трудностями при поиске необходимых ресурсов.

Решение условного импорта обеспечивается путем введения динамического импорта в ECMAScript 2020. Для динамического импорта используется функция import(), которая принимает строковый аргумент, представляющий имя модуля. Функция возвращает обещание, которое разрешается в импортированный модуль.

Вот как можно условно импортировать модуль с помощью динамического импорта:

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

В этом примере ключевое слово «импорт» появляется в условном операторе. Функция import() возвращает обещание, которое затем разрешается, и модулю присваивается переменная «что-то». Это позволяет выполнить условный импорт модуля без синтаксических ошибок.