Wie führt man einen „variablen“ ES6-Import durch?

Ist es möglich, etwas in ein Modul zu importieren, das einen Variablennamen bereitstellt, während der ES6-Import verwendet wird?

Das heißt, ich möchte ein Modul zur Laufzeit importieren, abhängig von den in einer Konfiguration angegebenen Werten:

import something from './utils/' + variableName;

Beachten Sie, dass ich Node.js verwende, aber Antworten müssen die Kompatibilität mit ECMAScript-Modulen berücksichtigen.

Nicht mit der import Aussage. import und export sind so definiert, dass sie statisch auswertbar sind, also nicht auf Laufzeitinformationen angewiesen sind.

Sie suchen die Loader-API (Polyfill)aber ich bin etwas unklar über den Status der Spezifikation:

System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});

Während dies eigentlich kein dynamischer Import ist (z. B. werden in meinem Fall alle Dateien, die ich unten importiere, von Webpack importiert und gebündelt, nicht zur Laufzeit ausgewählt), ist ein Muster, das ich verwendet habe und das unter bestimmten Umständen hilfreich sein kann :

import Template1 from './Template1.js';
import Template2 from './Template2.js';

const templates = {
  Template1,
  Template2
};

export function getTemplate (name) {
  return templates[name];
}

oder alternativ:

// index.js
export { default as Template1 } from './Template1';
export { default as Template2 } from './Template2';


// OtherComponent.js
import * as templates from './index.js'
...
// handy to be able to fall back to a default!
return templates[name] || templates.Template1;

Ich glaube nicht, dass ich so einfach auf einen Standard zurückgreifen kann require()was einen Fehler auslöst, wenn ich versuche, einen konstruierten Vorlagenpfad zu importieren, der nicht existiert.

Gute Beispiele und Vergleiche zwischen require und import finden Sie hier: http://www.2ality.com/2014/09/es6-modules-final.html

Hervorragende Dokumentation zum Re-Export von @iainastacio:
http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

Ich bin gespannt auf Feedback zu diesem Ansatz 🙂

Es gibt eine neue Spezifikation namens a Dynamischer Import für ES-Module. Im Grunde rufst du einfach an import('./path/file.js') und du bist gut zu gehen. Die Funktion gibt ein Promise zurück, das mit dem Modul aufgelöst wird, wenn der Import erfolgreich war.

async function importModule() {
   try {
      const module = await import('./path/module.js');
   } catch (error) {
      console.error('import failed');
   }
}

Anwendungsfälle

Zu den Anwendungsfällen gehören Routenbasierter Komponentenimport für React, Vue usw. und die Fähigkeit dazu Lazy-Load-Modulesobald sie zur Laufzeit benötigt werden.

Weitere Informationen

Hier ist eine Erklärung dazu Google-Entwickler.

Browserkompatibilität (April 2020)

Entsprechend MDN es wird von allen aktuellen gängigen Browsern (außer IE) unterstützt und caniuse.com zeigt 87 % Unterstützung über den globalen Marktanteil. Wieder keine Unterstützung in IE oder Nicht-Chrom-Edge.

Ergänzend zu Felix’ Antwort weise ich ausdrücklich darauf hin, dass dies derzeit von der nicht erlaubt ist ECMAScript 6-Grammatik:

Importdeklaration :

• importieren ImportKlausel FromClause ;

• importieren Modulspezifizierer ;

FromClause :

• aus ModuleSpecifier

ModuleSpecifier :

• StringLiteral

EIN ModuleSpecifier kann nur ein sein StringLiteralnicht irgendeine andere Art von Ausdruck wie ein AdditiverAusdruck.

Ich verstehe die speziell für ES6 gestellte Frage import in Node.js, aber das Folgende könnte anderen helfen, die nach einer allgemeineren Lösung suchen:

let variableName = "es5.js";
const something = require(`./utils/${variableName}`);

Beachten Sie, ob Sie ein ES6-Modul importieren und müssen auf die zugreifen default exportieren, müssen Sie eine der folgenden Methoden verwenden:

let variableName = "es6.js";

// Assigning
const defaultMethod = require(`./utils/${variableName}`).default;

// Accessing
const something = require(`./utils/${variableName}`);
something.default();

Sie können bei diesem Ansatz auch die Destrukturierung verwenden, was zu mehr Syntaxvertrautheit mit Ihren anderen Importen führen kann:

// Destructuring 
const { someMethod } = require(`./utils/${variableName}`);    
someMethod();

Leider, wenn Sie zugreifen möchten default Neben der Destrukturierung müssen Sie dies in mehreren Schritten durchführen:

// ES6 Syntax
Import defaultMethod, { someMethod } from "const-path.js";

// Destructuring + default assignment
const something = require(`./utils/${variableName}`);

const defaultMethod = something.default;    
const { someMethod, someOtherMethod } = something;

Sie können dazu die Nicht-ES6-Notation verwenden. das hat bei mir funktioniert:

let myModule = null;
if (needsToLoadModule) {
  myModule = require('my-module').default;
}

Ich hatte ein ähnliches Problem mit Vue.js: Wenn Sie Variable in verwenden import(variableName) Zur Bauzeit weiß Webpack nicht, wo es suchen soll. Sie müssen es also auf den bekannten Pfad mit der entsprechenden Erweiterung wie folgt beschränken:

let something = import("@/" + variableName + ".js") 

Dass Antwort in GitHub für das gleiche Problem war sehr hilfreich für mich.