¿Cómo puedo importar condicionalmente un módulo ES6?

Necesito hacer algo como:

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

El código anterior no se compila; lanza SyntaxError: ... 'import' and 'export' may only appear at the top level.

Intenté usar System.importcomo se muestra aquí , pero no sé de dónde Systemviene. ¿Es una propuesta de ES6 que no terminó siendo aceptada? El enlace a la "API programática" de ese artículo me devuelve a una página de documentos en desuso .

Tenemos una propuesta dinámica de importaciones ahora con ECMA. Esto está en la etapa 3. Esto también está disponible como preajuste de babel .

A continuación se muestra una forma de hacer una representación condicional según su caso.

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

Esto básicamente devuelve una promesa. Se espera que la resolución de promesa tenga el módulo. La propuesta también tiene otras características como importaciones dinámicas múltiples, importaciones predeterminadas, importación de archivos js, etc. Puede encontrar más información sobre importaciones dinámicas aquí .

Si lo desea, puede usar require. Esta es una manera de tener una declaración de requerimiento condicional.

let something = null;
let other = null;

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

No puede importar condicionalmente, pero puede hacer lo contrario: exportar algo condicionalmente. Depende de su caso de uso, por lo que esta solución podría no ser adecuada para usted.

Tu puedes hacer:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Lo uso para burlarme de bibliotecas analíticas como mixpanel, etc., porque no puedo tener varias compilaciones o nuestra interfaz actualmente. No es el más elegante, pero funciona. Solo tengo algunos 'si' aquí y allá dependiendo del entorno porque en el caso de mixpanel, necesita inicialización.

Parece que la respuesta es que, a partir de ahora, no puedes.

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

Creo que la intención es permitir el análisis estático tanto como sea posible, y los módulos importados condicionalmente lo rompen. También vale la pena mencionar: estoy usando Babel , y supongo que SystemBabel no es compatible porque la API del cargador de módulos no se convirtió en un estándar ES6.

require()es una forma de importar algún módulo en el tiempo de ejecución y califica igualmente para el análisis estático como importsi se usara con rutas literales de cadena. El paquete lo requiere para seleccionar dependencias para el paquete.

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

Para la resolución de módulos dinámicos con soporte completo de análisis estático, primeros módulos de índice en un indexador (index.js) e importar el indexador en el 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]);

Diferencia importante si usa el modo dinámico de Webpack de importación 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(...);
}

oscurecerlo en una evaluación funcionó para mí, ocultándolo del analizador estático ...

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

Pude lograr esto usando una función invocada de inmediato y requiero una declaración.

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

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

Las importaciones condicionales también podrían lograrse con un ternario y require()s:

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

Este ejemplo fue tomado de ES Lint global-require docs: https://eslint.org/docs/rules/global-require

Mire este ejemplo para comprender claramente cómo funciona la importación dinámica.

Ejemplo de importaciones de módulos dinámicos

Tener conocimientos básicos de importación y exportación de módulos.

Módulos de JavaScript Github

Javascript Módulos MDN

No, no puedes!

Sin embargo, haber topado con ese problema debería hacerte repensar cómo organizas tu código.

Antes de los módulos ES6, teníamos módulos CommonJS que usaban la sintaxis require (). Estos módulos eran "dinámicos", lo que significa que podíamos importar nuevos módulos según las condiciones de nuestro código. - fuente: https://bitsofco.de/what-is-tree-shaking/

Supongo que una de las razones por las que dejaron de admitir ES6 en adelante es el hecho de que compilarlo sería muy difícil o imposible.