Импорт ES6 с учетом переменных

В ES6 оператор импорта предоставляет удобный способ импорта модулей в ваш код. Однако что, если вам нужно импортировать модуль на основе имени переменной во время выполнения? Это может возникнуть в сценариях, когда вы динамически загружаете модули на основе настроек конфигурации.

Статический импорт

К сожалению, оператор импорта в ES6 анализируется статически. Это означает, что импортируемые модули должны быть известны во время компиляции. Следовательно, вы не можете использовать имена переменных для указания модулей для импорта.

API загрузчика

Для динамической загрузки модулей вам необходимо использовать API загрузчика. Этот API предоставляет функцию System.import(), которая принимает строку, определяющую загружаемый модуль. В следующем примере показано, как его можно использовать для загрузки модуля на основе имени переменной:

System.import('./utils/'   variableName).then(function(module) {
  console.log(module);
});

Функция System.import() возвращает обещание, которое разрешается в загруженный модуль. Затем вы можете получить доступ к экспортированным членам модуля с помощью объекта модуля.

Соображения совместимости

API загрузчика поддерживается в современных браузерах и Node.js. Однако вам может потребоваться использовать полифилл для обеспечения совместимости со старыми браузерами.