Es scheint offensichtlich zu sein, aber ich war etwas verwirrt darüber, wann geschweifte Klammern zum Importieren eines einzelnen Moduls in ES6 verwendet werden sollten. In dem React-Native-Projekt, an dem ich arbeite, habe ich beispielsweise die folgende Datei und ihren Inhalt:
initialState.jsvar initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2, task: 'Shopping Groceries', completed: false},
]
}
};
export default initialState;
In der TodoReducer.js muss ich es ohne geschweifte Klammern importieren:
import initialState from './todoInitialState';
Wenn ich die initialState
geschweiften Klammern einschließe , wird für die folgende Codezeile der folgende Fehler angezeigt:
TodoReducer.js:Eigenschaft todo von undefined kann nicht gelesen werden
export default function todos(state = initialState.todo, action) {
// ...
}
Ähnliche Fehler treten auch bei meinen Bauteilen mit den geschweiften Klammern auf. Ich habe mich gefragt, wann ich geschweifte Klammern für einen einzelnen Import verwenden soll, da Sie beim Importieren mehrerer Komponenten / Module diese natürlich in geschweifte Klammern einschließen müssen, die ich kenne.
Bearbeiten:
Der SO-Beitrag hier beantwortet meine Frage nicht, stattdessen frage ich, wann ich geschweifte Klammern zum Importieren eines einzelnen Moduls verwenden soll oder nicht , oder ich sollte niemals geschweifte Klammern zum Importieren eines einzelnen Moduls in ES6 verwenden (dies ist anscheinend nicht die Fall, wie ich gesehen habe, Einzelimport mit geschweiften Klammern erforderlich)
quelle
Antworten:
Dies ist ein Standardimport :
Es funktioniert nur, wenn
A
der Standardexport :In diesem Fall spielt es keine Rolle, welchen Namen Sie ihm beim Importieren zuweisen:
Weil es immer in den Standard-Export von aufgelöst wird
A
.Dies ist ein benannter Import mit dem Namen
A
:Es funktioniert nur, wenn es
A
einen benannten Export mit dem Namen enthältA
:In diesem Fall ist der Name wichtig, da Sie eine bestimmte Sache anhand ihres Exportnamens importieren :
Um diese Arbeit zu machen, würden Sie einen hinzufügen entsprechenden Namen Export zu
A
:Ein Modul kann nur einen Standardexport haben , aber so viele benannte Exporte, wie Sie möchten (null, eins, zwei oder viele). Sie können sie alle zusammen importieren:
Hier importieren wir die Standard - Export als
A
, und benannte Exporte genanntmyA
undSomething
sind.Wir können ihnen beim Importieren auch alle unterschiedlichen Namen zuweisen:
Die Standardexporte werden in der Regel für alles verwendet, was Sie normalerweise vom Modul erwarten. Die genannten Exporte werden in der Regel für Dienstprogramme verwendet, die möglicherweise nützlich sind, aber nicht immer erforderlich sind. Es liegt jedoch an Ihnen, zu entscheiden, wie Dinge exportiert werden sollen: Beispielsweise hat ein Modul möglicherweise überhaupt keinen Standardexport.
Dies ist eine großartige Anleitung für ES-Module, in der der Unterschied zwischen Standard- und benannten Exporten erläutert wird.
quelle
export const myA = 43; export const Something = 44;
als auch einen hatexport default { myA, Something }
? Wenn Sie also importieren, können Sie entwederimport A from './A';
für alles im Modul, oderimport { Something } from './A';
so erhalten Sie nur einen Teil des Modulsimport * as AllTheThings
.import 'firebase/storage';
oderimport 'rxjs/add/operator/map';
. Was macht das eigentlich?Ich würde sagen, es gibt auch eine Sternnotation für das
import
erwähnenswerte ES6-Schlüsselwort.Wenn Sie versuchen, Log Mix zu konsolidieren:
Sie erhalten:
Die Klammern sind golden, wenn Sie nur bestimmte Komponenten des Moduls benötigen, wodurch Bundler wie Webpack weniger Platz benötigen.
quelle
import * as Mix from "./A";
undimport A as Mix from "./A";
das gleiche?Die Antwort von Dan Abramov oben erklärt die Standardexporte und benannten Exporte .
Welche verwenden?
Zitat von David Herman : ECMAScript 6 bevorzugt den Einzel- / Standardexportstil und bietet die süßeste Syntax für den Import des Standards. Der Import benannter Exporte kann und sollte etwas weniger präzise sein.
In TypeScript wird der benannte Export jedoch aufgrund von Refactoring bevorzugt. Wenn Sie beispielsweise eine Klasse standardmäßig exportieren und umbenennen, ändert sich der Klassenname nur in dieser Datei und nicht in den anderen Referenzen. Der Name der benannten Exportklasse wird in allen Referenzen umbenannt. Benannte Exporte werden auch für Versorgungsunternehmen bevorzugt.
Verwenden Sie insgesamt alles, was Sie bevorzugen.
Zusätzlich
Der Standardexport ist eigentlich ein benannter Export mit dem Standardnamen, sodass der Standardexport wie folgt importiert werden kann:
quelle
Additional
Zeile ist eine gute Information.import A from './A'
macht keinen Sinn, wenn Sie exportieren, ohne einen Namen wie zu definierenexport default 42
.Wenn Sie sich
import
nur Syntaxzucker für Knotenmodule, Objekte und Destrukturierung vorstellen, finde ich das ziemlich intuitiv.quelle
Um die Verwendung von geschweiften Klammern in
import
Anweisungen zu verstehen, müssen Sie zunächst das in ES6 eingeführte Konzept der Zerstörung verstehenObjektzerstörung
Array-Destrukturierung
Listenabgleich verwenden
Verwenden des Spread-Operators
Nachdem wir das aus dem Weg geräumt haben , können Sie in ES6 mehrere Module exportieren. Sie können dann die Objektzerstörung wie unten verwenden
Nehmen wir an, Sie haben ein Modul namens
module.js
Sie möchten die exportierten Funktionen in importieren
index.js
.Sie können auch verschiedene Variablennamen verwenden
quelle
import {printFirstname as pFname, printLastname as pLname} from './module.js'
entspricht:var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');
Zusammenfassung
ES6
:Exporte:
Sie haben 2 Arten von Exporten:
Syntax:
Importe:
Die Art des Exports (dh benannte oder Standardexporte) beeinflusst, wie etwas importiert wird:
Syntax:
Interessante Dinge:
Aliase:
Wann immer Sie einen benannten Import umbenennen möchten, ist dies über Aliase möglich . Die Syntax hierfür lautet wie folgt:
Jetzt haben wir importiert,
importantData_1
aber der Bezeichner istmyData
stattimportantData_1
.quelle
Wenn Sie eine Funktion exportieren, müssen Sie normalerweise die {} verwenden
Sie nutzen
import {x} from ''
Sie verwenden müssen , um
import X from ''
hier Sie X, was auch immer ändern können Variable , die Sie wollenquelle
Die geschweiften Klammern ({}) werden zum Importieren benannter Bindungen verwendet, und das Konzept dahinter ist die Destrukturierungszuweisung
Eine einfache Demonstration der Funktionsweise der Importanweisung anhand eines Beispiels finden Sie in meiner eigenen Antwort auf eine ähnliche Frage unter Wann verwenden wir '{}' bei Javascript-Importen?
quelle
Die geschweiften Klammern werden nur für den Import verwendet, wenn der Export benannt ist. Wenn der Export standardmäßig ist, werden geschweifte Klammern nicht für den Import verwendet.
quelle
Für einen Standardexport verwenden wir beim Importieren nicht {}.
z.B
player.js
index.js
index.js
player.js
Wenn wir alles importieren möchten, was wir exportieren, verwenden wir *
quelle