Ist es möglich, während des ES6-Imports etwas in ein Modul mit Variablennamen zu importieren?
Dh ich möchte ein Modul zur Laufzeit importieren, abhängig von den in einer Konfiguration angegebenen Werten:
import something from './utils/' + variableName;
javascript
node.js
ecmascript-6
Vytautas Butkus
quelle
quelle
Antworten:
Nicht mit der
import
Aussage.import
undexport
sind so definiert, dass sie statisch analysierbar sind, sodass sie nicht von Laufzeitinformationen abhängen können.Sie suchen nach der Loader-API (Polyfill) , aber ich bin mir über den Status der Spezifikation etwas unklar:
quelle
Zusätzlich zu Felix 'Antwort werde ich ausdrücklich darauf hinweisen, dass dies derzeit in der ECMAScript 6-Grammatik nicht zulässig ist :
Ein ModuleSpecifier kann nur ein StringLiteral sein , keine andere Art von Ausdruck wie ein AdditiveExpression .
quelle
const
string literal
s erweitert wurde. Sie sind statisch analysierbar, nicht wahr? Dies würde die Wiederverwendung des Ortes einer Abhängigkeit möglich machen. (z. B. eine Vorlage importieren und sowohl die Vorlage als auch den Speicherort der Vorlage verfügbar haben).Obwohl dies eigentlich kein dynamischer Import ist (z. B. werden unter meinen Umständen alle Dateien, die ich unten importiere, von einem Webpack importiert und gebündelt, das zur Laufzeit nicht ausgewählt wurde), ist ein von mir verwendetes Muster, das unter bestimmten Umständen hilfreich sein kann ::
oder alternativ:
Ich glaube nicht, dass ich mit 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 Anforderung und Import finden Sie hier: http://www.2ality.com/2014/09/es6-modules-final.html
Hervorragende Dokumentation zum erneuten Exportieren aus @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles
Ich bin interessiert, Feedback zu diesem Ansatz zu hören :)
quelle
Object.values(templates)
.Es gibt eine neue Spezifikation, die als dynamischer Import für ES-Module bezeichnet wird. Grundsätzlich rufen Sie einfach an
import('./path/file.js')
und können loslegen. Die Funktion gibt ein Versprechen zurück, das mit dem Modul aufgelöst wird, wenn der Import erfolgreich war.Anwendungsfälle
Anwendungsfälle umfassen routenbasierte Komponentenimport für React, Vue usw. und die Möglichkeit, Module zu verzögern , sobald sie zur Laufzeit benötigt werden.
Weitere Informationen
Hier ist eine Erklärung zu Google Developers .
Browserkompatibilität (April 2020)
Laut MDN wird es von jedem aktuellen großen Browser (außer IE) unterstützt und caniuse.com zeigt eine Unterstützung von 87% über den globalen Marktanteil. Wieder keine Unterstützung in IE oder Nicht-Chrom-Edge.
quelle
Ich verstehe die Frage, die speziell für ES6
import
in Node.js gestellt wurde, aber das Folgende könnte anderen helfen, nach einer allgemeineren Lösung zu suchen:Hinweis: Wenn Sie ein ES6-Modul importieren und auf den
default
Export zugreifen müssen , müssen Sie eine der folgenden Optionen verwenden:Sie können bei diesem Ansatz auch die Destrukturierung verwenden, um die Syntax mit Ihren anderen Importen besser vertraut zu machen:
Wenn Sie sowohl Zugriff
default
als auch Destrukturierung wünschen , müssen Sie dies leider in mehreren Schritten ausführen:quelle
Sie können dazu die Nicht-ES6-Notation verwenden. Das hat bei mir funktioniert:
quelle
Ich mag diese Syntax weniger, aber sie funktioniert:
anstatt zu schreiben
Verwenden Sie diese Syntax:
quelle
require()
ist eine Node.JS-Methode zum Laden von Dateien. Dies ist die frühe Version.import
Anweisung ist die neuere Version, die jetzt Teil der offiziellen Sprachsyntax ist. In vielen Fällen verwendet der Browser jedoch den vorherigen (hinter der Wissenschaft). Die require-Anweisung löst auch Ihre Dateien aus. Wenn eine Datei also zum zweiten Mal geladen wird, wird sie aus dem Speicher geladen (bessere Leistung). Der Import hat seine eigenen Vorteile - wenn Sie WebPack verwenden. Dann kann das Webpack tote Referenzen entfernen (diese Skripte werden nicht auf den Client heruntergeladen).Der dynamische Import () (verfügbar in Chrome 63+) erledigt Ihre Aufgabe. Hier ist wie:
quelle
Ich würde es so machen
quelle
./utils/test.js
Aufruf aus Datei
quelle