Importações ES6 com reconhecimento de variável

No ES6, a instrução import fornece uma maneira conveniente de importar módulos para o seu código. No entanto, e se você precisar importar um módulo baseado em um nome de variável em tempo de execução? Isso pode surgir em cenários em que você carrega módulos dinamicamente com base nas definições de configuração.

Importações estáticas

Infelizmente, a instrução de importação no ES6 é analisada estaticamente. Isso significa que os módulos que estão sendo importados devem ser conhecidos em tempo de compilação. Portanto, você não pode usar nomes de variáveis ​​para especificar módulos a serem importados.

API Loader

Para carregar módulos dinamicamente, você precisa usar a API Loader. Esta API fornece uma função chamada System.import() que aceita uma string especificando o módulo a ser carregado. O exemplo a seguir mostra como você pode usá-lo para carregar um módulo com base em um nome de variável:

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

A função System.import() retorna uma promessa que resolve para o módulo carregado. Você pode então acessar os membros exportados do módulo usando o objeto do módulo.

Considerações de compatibilidade

A API Loader é compatível com navegadores modernos e Node.js. No entanto, pode ser necessário usar um polyfill para obter compatibilidade com navegadores mais antigos.