Comment puis-je importer sous condition un module ES6?

J'ai besoin de faire quelque chose comme:

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

Le code ci-dessus ne compile pas; il jette SyntaxError: ... 'import' and 'export' may only appear at the top level.

J'ai essayé d'utiliser System.importcomme indiqué ici , mais je ne sais pas d'où Systemvient. Est-ce une proposition ES6 qui n'a finalement pas été acceptée? Le lien vers "API programmatique" de cet article me renvoie vers une page de documentation obsolète .

Nous avons maintenant une proposition d'importation dynamique avec l'ECMA. Ceci est à l'étape 3. Ceci est également disponible en tant que babel-preset .

Voici un moyen de faire un rendu conditionnel selon votre cas.

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

Cela renvoie essentiellement une promesse. La résolution de la promesse devrait avoir le module. La proposition a également d'autres fonctionnalités comme les importations dynamiques multiples, les importations par défaut, l'importation de fichiers js, etc. Vous pouvez trouver plus d'informations sur les importations dynamiques ici .

Si vous le souhaitez, vous pouvez utiliser require. C'est une manière d'avoir une instruction conditionnelle require.

let something = null;
let other = null;

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

Vous ne pouvez pas importer de manière conditionnelle, mais vous pouvez faire le contraire: exporter quelque chose de manière conditionnelle. Cela dépend de votre cas d'utilisation, donc ce travail n'est peut-être pas pour vous.

Tu peux faire:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

J'utilise cela pour simuler des bibliothèques d'analyse comme mixpanel, etc. parce que je ne peux pas avoir plusieurs builds ou notre frontend actuellement. Pas le plus élégant, mais fonctionne. J'ai juste quelques «si» ici et là en fonction de l'environnement car dans le cas du mixpanel, il a besoin d'être initialisé.

On dirait que la réponse est que, pour le moment, vous ne pouvez pas.

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

Je pense que l'intention est de permettre l'analyse statique autant que possible, et les modules importés conditionnellement brisent cela. Il convient également de mentionner - j'utilise Babel , et je suppose que cela Systemn'est pas pris en charge par Babel car l'API du chargeur de module n'est pas devenue une norme ES6.

require()est un moyen d'importer un module au moment de l'exécution et il se qualifie également pour l'analyse statique, comme imports'il était utilisé avec des chemins littéraux de chaîne. Ceci est requis par le bundler pour choisir les dépendances pour le bundle.

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

Pour une résolution de module dynamique avec prise en charge complète de l'analyse statique, commencez par indexer les modules dans un indexeur (index.js) et importez l'indexeur dans le module hôte.

// 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]);

Différence importante si vous utilisez le mode d'importation dynamique Webpack 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(...);
}

l'obscurcir dans une évaluation a fonctionné pour moi, le cachant de l'analyseur statique ...

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

J'ai pu y parvenir en utilisant une fonction immédiatement appelée et une instruction require.

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

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

Les importations conditionnelles pourraient également être réalisées avec un ternaire et require()s:

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

Cet exemple est tiré de la documentation ES Lint global-require: https://eslint.org/docs/rules/global-require

Regardez cet exemple pour comprendre clairement le fonctionnement de l'importation dynamique.

Exemple d'importations de modules dynamiques

Avoir une compréhension de base de l'importation et de l'exportation de modules.

Modules JavaScript Github

Modules Javascript MDN

Non, tu ne peux pas!

Cependant, après avoir rencontré ce problème, vous devriez repenser la façon dont vous organisez votre code.

Avant les modules ES6, nous avions des modules CommonJS qui utilisaient la syntaxe require (). Ces modules étaient «dynamiques», ce qui signifie que nous pouvions importer de nouveaux modules en fonction des conditions de notre code. - source: https://bitsofco.de/what-is-tree-shaking/

Je suppose qu'une des raisons pour lesquelles ils ont abandonné ce support sur ES6 est le fait que le compiler serait très difficile, voire impossible.