Come posso importare condizionalmente un modulo ES6?

Devo fare qualcosa del tipo:

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

Il codice sopra non viene compilato; getta SyntaxError: ... 'import' and 'export' may only appear at the top level.

Ho provato a usare System.importcome mostrato qui , ma non so da dove Systemviene. È una proposta ES6 che non è stata accettata? Il link all '"API programmatica" di quell'articolo mi porta a una pagina di documenti obsoleti .

Abbiamo una proposta di importazione dinamica ora con ECMA. Questo è nella fase 3. Questo è disponibile anche come preimpostazione babele .

Di seguito è riportato un modo per eseguire il rendering condizionale secondo il tuo caso.

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

Questo sostanzialmente restituisce una promessa. La risoluzione della promessa dovrebbe avere il modulo. La proposta ha anche altre funzionalità come le importazioni multiple dinamiche, le importazioni predefinite, l'importazione di file js ecc. Puoi trovare maggiori informazioni sulle importazioni dinamiche qui .

Se lo desideri, puoi utilizzare Richiedi. Questo è un modo per avere una dichiarazione obbligatoria condizionale.

let something = null;
let other = null;

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

Non puoi importare in modo condizionale, ma puoi fare il contrario: esportare qualcosa in modo condizionale. Dipende dal tuo caso d'uso, quindi questo lavoro potrebbe non essere adatto a te.

Tu puoi fare:

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 per deridere librerie di analisi come mixpanel, ecc ... perché al momento non posso avere più build o il nostro frontend. Non il più elegante, ma funziona. Ho solo qualche 'if' qua e là a seconda dell'ambiente perché nel caso del mixpanel, ha bisogno di inizializzazione.

Sembra che la risposta sia che, per ora, non puoi.

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

Penso che l'intenzione sia quella di abilitare il più possibile l'analisi statica e che i moduli importati condizionatamente lo rompano. Vale anche la pena ricordare che sto usando Babel e suppongo che Systemnon sia supportato da Babel perché l'API del caricatore di moduli non è diventata uno standard ES6.

require()è un modo per importare alcuni moduli in fase di esecuzione e si qualifica ugualmente per l'analisi statica come importse utilizzato con percorsi letterali di stringa. Questo è richiesto dal bundler per selezionare le dipendenze per il bundle.

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

Per la risoluzione dinamica dei moduli con supporto completo per l'analisi statica, i primi moduli indice in un indicizzatore (index.js) e importare l'indicizzatore nel modulo 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]);

Differenza importante se si utilizza la modalità Webpack di importazione dinamica 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(...);
}

oscurandolo in una valutazione ha funzionato per me, nascondendolo dall'analizzatore statico ...

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

Sono stato in grado di ottenere questo risultato usando una funzione immediatamente invocata e richiedendo una dichiarazione.

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

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

Le importazioni condizionali potrebbero anche essere realizzate con un ternario e require():

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

Questo esempio è stato tratto dai documenti di ES Lint per i requisiti globali: https://eslint.org/docs/rules/global-require

Guarda questo esempio per una chiara comprensione di come funziona l'importazione dinamica.

Esempio di importazione di moduli dinamici

Conoscenza di base dell'importazione e dell'esportazione di moduli.

Moduli JavaScript Github

Moduli Javascript MDN

No, non puoi!

Tuttavia, essersi imbattuto in questo problema dovrebbe farti ripensare su come organizzare il codice.

Prima dei moduli ES6, avevamo moduli CommonJS che utilizzavano la sintassi request (). Questi moduli erano "dinamici", il che significa che potevamo importare nuovi moduli in base alle condizioni nel nostro codice. - fonte: https://bitsofco.de/what-is-tree-shaking/

Immagino che uno dei motivi per cui hanno abbandonato il supporto su ES6 sia il fatto che compilarlo sarebbe molto difficile o impossibile.