modules - module.exports javascript

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

Question

Necesito hacer algo como:

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

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

Intenté usar System.import como se muestra here , pero no sé de dónde viene el System . ¿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 .

Answer 1

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

Answer 2

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.

Answer 3

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 rompen eso. También vale la pena mencionar: estoy usando Babel , y supongo que Babel no admite el System porque la API del cargador de módulos no se convirtió en un estándar ES6.

Answer 4

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();
}

Answer 5

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();
}

Answer 6

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

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í .

Answer 7

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

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

Answer 8

require() es una forma de importar algún módulo en el tiempo de ejecución e igualmente califica para análisis estático como import si se usa con rutas literales de cadena. El paquete lo requiere para seleccionar las 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 importador de índice 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]);

Answer 9

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