Wie kann ich ein ES6-Modul bedingt importieren?

Ich muss so etwas tun wie:

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

Der obige Code wird nicht kompiliert. es wirft SyntaxError: ... 'import' and 'export' may only appear at the top level.

Ich habe versucht, System.importwie hier gezeigt zu verwenden , aber ich weiß nicht, woher es Systemkommt. Ist es ein ES6-Vorschlag, der nicht angenommen wurde? Der Link zu "Programmatic API" aus diesem Artikel führt mich zu einer veralteten Dokumentenseite .

Wir haben jetzt einen dynamischen Importvorschlag bei ECMA. Dies ist in Stufe 3. Dies ist auch als Babel-Preset verfügbar .

Im Folgenden finden Sie eine Möglichkeit zum bedingten Rendern gemäß Ihrem Fall.

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

Dies gibt im Grunde ein Versprechen zurück. Die Auflösung des Versprechens wird voraussichtlich das Modul haben. Der Vorschlag enthält auch andere Funktionen wie mehrere dynamische Importe, Standardimporte, Import von JS-Dateien usw. Weitere Informationen zu dynamischen Importen finden Sie hier .

Wenn Sie möchten, können Sie erfordern verwenden. Dies ist eine Möglichkeit, eine bedingte require-Anweisung zu erhalten.

let something = null;
let other = null;

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

Sie können nicht bedingt importieren, aber Sie können das Gegenteil tun: etwas bedingt exportieren. Dies hängt von Ihrem Anwendungsfall ab, sodass diese Problemumgehung möglicherweise nicht für Sie geeignet ist.

Du kannst tun:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Ich benutze das, um Analytics-Bibliotheken wie Mixpanel usw. zu verspotten, weil ich derzeit nicht mehrere Builds oder unser Frontend haben kann. Nicht das eleganteste, funktioniert aber. Ich habe hier und da nur ein paar "Wenn", abhängig von der Umgebung, da im Fall von Mixpanel eine Initialisierung erforderlich ist.

Sieht so aus, als ob die Antwort lautet, dass Sie ab sofort nicht mehr können.

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

Ich denke, die Absicht ist es, die statische Analyse so weit wie möglich zu ermöglichen, und bedingt importierte Module brechen dies. Erwähnenswert ist auch, dass ich Babel verwende und ich vermute, dass Systemdies von Babel nicht unterstützt wird, da die Modullader-API nicht zum ES6-Standard wurde.

require()ist eine Möglichkeit, ein Modul zur Laufzeit zu importieren, und es eignet sich gleichermaßen für statische Analysen, wie importwenn es mit String-Literalpfaden verwendet wird. Dies wird vom Bundler benötigt, um Abhängigkeiten für das Bundle auszuwählen.

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

Für eine dynamische Modulauflösung mit vollständiger Unterstützung der statischen Analyse müssen Sie zuerst die Indexmodule in einem Indexer (index.js) und den Indexer in das Hostmodul importieren.

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

Wichtiger Unterschied, wenn Sie den dynamischen Import-Webpack-Modus verwenden 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(...);
}

es in einer Auswertung zu verdecken, hat für mich funktioniert und es vor dem statischen Analysator versteckt ...

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

Ich konnte dies mit einer sofort aufgerufenen Funktion erreichen und eine Anweisung benötigen.

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

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

Bedingte Importe könnten auch mit einem ternären und require()s erreicht werden:

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

Dieses Beispiel wurde aus den global erforderlichen ES Lint-Dokumenten entnommen: https://eslint.org/docs/rules/global-require

Schauen Sie sich dieses Beispiel an, um zu verstehen, wie der dynamische Import funktioniert.

Beispiel für den Import dynamischer Module

Grundlegendes Verständnis zum Importieren und Exportieren von Modulen.

JavaScript-Module Github

Javascript-Module MDN

Nein, das kannst du nicht!

Wenn Sie jedoch auf dieses Problem gestoßen sind, sollten Sie überlegen, wie Sie Ihren Code organisieren.

Vor ES6-Modulen hatten wir CommonJS-Module, die die require () -Syntax verwendeten. Diese Module waren "dynamisch", was bedeutet, dass wir neue Module basierend auf den Bedingungen in unserem Code importieren konnten. - Quelle: https://bitsofco.de/what-is-tree-shaking/

Ich denke, einer der Gründe, warum sie diese Unterstützung ab ES6 eingestellt haben, ist die Tatsache, dass das Kompilieren sehr schwierig oder unmöglich wäre.