Como posso importar condicionalmente um módulo ES6?

Eu preciso fazer algo como:

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

O código acima não compila; joga SyntaxError: ... 'import' and 'export' may only appear at the top level.

Tentei usar System.importcomo mostrado aqui , mas não sei de onde Systemvem. É uma proposta do ES6 que não acabou sendo aceita? O link para "API programática" desse artigo me leva a uma página de documentos obsoleta .

Agora temos uma proposta de importação dinâmica com a ECMA. Isso está no estágio 3. Também está disponível como predefinição de babel .

A seguir, é apresentado um modo de renderização condicional conforme seu caso.

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

Isso basicamente retorna uma promessa. Espera-se que a resolução da promessa tenha o módulo. A proposta também possui outros recursos, como várias importações dinâmicas, importações padrão, importação de arquivos js etc. Você pode encontrar mais informações sobre importações dinâmicas aqui .

Se desejar, você pode usar o exigir. Esta é uma maneira de ter uma instrução de requisição condicional.

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

Você não pode importar condicionalmente, mas pode fazer o oposto: exportar algo condicionalmente. Depende do seu caso de uso, portanto, essa solução alternativa pode não ser para você.

Você pode fazer:

api.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Eu uso isso para simular bibliotecas de análise como mixpanel, etc ... porque não posso ter várias compilações ou nosso front-end atualmente. Não é o mais elegante, mas funciona. Eu só tenho alguns 'se' aqui e ali, dependendo do ambiente, porque no caso do mixpanel, ele precisa de inicialização.

Parece que a resposta é que, a partir de agora, você não pode.

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

Penso que a intenção é permitir a análise estática, tanto quanto possível, e os módulos importados condicionalmente quebram isso. Também vale a pena mencionar - estou usando o Babel e acho que isso Systemnão é suportado pelo Babel porque a API do carregador de módulos não se tornou um padrão ES6.

require()é uma maneira de importar algum módulo no tempo de execução e se qualifica igualmente para análise estática, como importse usado com caminhos literais de cadeia de caracteres. Isso é requerido pelo bundler para escolher dependências para o bundle.

const defaultOne = require('path/to/component').default;
const NamedOne = require('path/to/component').theName;

Para resolução dinâmica de módulos com suporte completo à análise estática, primeiro indexe os módulos em um indexador (index.js) e importe o indexador no módulo host.

// index.js
export { default as ModuleOne } from 'path/to/module/one';
export { default as ModuleTwo } from 'path/to/module/two';
export { SomeNamedModule } from 'path/to/named/module';

// host.js
import * as indexer from 'index';
const moduleName = 'ModuleOne';
const Module = require(indexer[moduleName]);

Diferença importante se você usar o modo Webpack de importação dinâmica eager:

if (normalCondition) {
  // this will be included to bundle, whether you use it or not
  import(...);
}

if (process.env.SOMETHING === 'true') {
  // this will not be included to bundle, if SOMETHING is not 'true'
  import(...);
}

obscurecê-lo em uma avaliação funcionou para mim, escondendo-o do analisador estático ...

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

Consegui fazer isso usando uma função imediatamente invocada e exigir instrução.

const something = (() => (
  condition ? require('something') : null
))();

if(something) {
  something.doStuff();
}

As importações condicionais também poderiam ser alcançadas com um ternário require()es:

const logger = DEBUG ? require('dev-logger') : require('logger');

Este exemplo foi retirado dos documentos de solicitação global do ES Lint: https://eslint.org/docs/rules/global-require

Veja este exemplo para entender claramente como a importação dinâmica funciona.

Exemplo de importação de módulo dinâmico

Para ter um entendimento básico de importação e exportação de módulos.

Módulos JavaScript Github

Módulos Javascript MDN

Não, você não pode!

No entanto, ter esbarrado nessa questão deve fazer você repensar sobre como você organiza seu código.

Antes dos módulos ES6, tínhamos módulos CommonJS que usavam a sintaxe require (). Esses módulos eram "dinâmicos", o que significa que poderíamos importar novos módulos com base nas condições do nosso código. - fonte: https://bitsofco.de/what-is-tree-shaking/

Eu acho que uma das razões pelas quais eles abandonaram o suporte no ES6 em diante é o fato de que compilá-lo seria muito difícil ou impossível.