it-swarm.com.de

Wann sollte ich geschweifte Klammern für den ES6-Import verwenden?

Es scheint offensichtlich zu sein, aber ich war etwas verwirrt darüber, wann man geschweifte Klammern verwendet, um ein einzelnes Modul in ES6 zu importieren. Zum Beispiel habe ich im React-Native-Projekt, an dem ich arbeite, die folgende Datei und ihren Inhalt:

var 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 in geschweifte Klammern einschließen, erhalte ich die folgende Fehlermeldung für die folgende Codezeile:

Die Eigenschaft "toDo" von undefined kann nicht gelesen werden

export default function todos(state = initialState.todo, action) {
// ...
}

Ähnliche Fehler passieren auch bei meinen Komponenten mit den geschweiften Klammern. Ich habe mich gefragt, wann ich geschweifte Klammern für einen einzelnen Import verwenden sollte, denn wenn Sie mehrere Komponenten/Module importieren, müssen Sie diese natürlich in geschweifte Klammern einschließen, was ich weiß.

Bearbeiten:

Der SO -Post bei here beantwortet meine Frage nicht, stattdessen frage ich wann Ich sollte oder sollte keine geschweiften Klammern verwenden, um ein single - Modul oder ich zu importieren Verwenden Sie niemals geschweifte Klammern, um ein einzelnes Modul in ES6 zu importieren (dies ist anscheinend nicht der Fall, da ich einen einzelnen Import mit geschweiften Klammern gesehen habe).

529
TonyGW

Dies ist ein default Import:

// B.js
import A from './A'

Es funktioniert nur, wenn A den default-Export hat:

// A.js
export default 42

In diesem Fall ist es egal, welchen Namen Sie beim Importieren vergeben:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Weil es immer nach dem default Export von A aufgelöst wird.


Dies ist ein named-Import namens A:

import { A } from './A'

Es funktioniert nur, wenn A einen named-Export namens A enthält:

export const A = 42

In diesem Fall ist der Name von Bedeutung, weil Sie eine bestimmte Sache über ihren Exportnamen importieren:

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

Damit dies funktioniert, fügen Sie einen entsprechenden benannten Export zu A hinzu:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

Ein Modul kann nur one default export haben, aber so viele benannte Exporte wie gewünscht (null, eins, zwei oder viele). Sie können sie alle zusammen importieren:

// B.js
import A, { myA, Something } from './A'

Hier importieren wir den Standardexport als A und benannte Exporte namens myA bzw. Something.

// A.js
export default 42
export const myA = 43
export const Something = 44

Wir können ihnen auch alle anderen Namen beim Importieren zuweisen:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

Die Standardexporte werden normalerweise für das verwendet, was Sie normalerweise vom Modul erwarten. Die genannten Exporte werden in der Regel für Hilfsprogramme verwendet, die zwar praktisch sind, aber nicht immer erforderlich sind. Es ist 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, die den Unterschied zwischen Standard- und benannten Exporten erläutert.

1622
Dan Abramov

TL; DR : Geschweifte Klammern werden verwendet, wenn Sie einen nicht standardmäßigen Export importieren möchten.

Siehe Dan Abramovs Antwort oben für weitere Details.

94
Daniel Schmidt

Ich würde sagen, es gibt auch eine Notation für das import ES6-Schlüsselwort, die erwähnenswert ist.

 enter image description here

Wenn Sie versuchen, Log Mix zu konservieren:

import * as Mix from "./A";
console.log(Mix);

Sie erhalten:

 enter image description here

Wann sollte ich geschweifte Klammern für den ES6-Import verwenden?

Die Klammern sind goldfarben, wenn Sie nur bestimmte Komponenten des Moduls benötigen, was für Bundler wie Webpack kleinere Fußabdrücke bedeutet.

58
prosti

Die Antwort von Dan Abramov oben erklärt die Standardexporte und Exporte .

Welches zu benutzen?

Zitieren David Herman: ECMAScript 6 bevorzugt den Einzel-/Standardexportstil und gibt die süßeste Syntax für das Importieren des Standardwerts an. Der Import von benannten Exporten 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, wird der Klassenname nur in dieser Datei und nicht in den anderen Referenzen geändert. Bei benannten Exporten wird der Klassenname in allen Referenzen umbenannt. Benannte Exporte werden auch für Dienstprogramme bevorzugt. 

Verwenden Sie alles, was Sie bevorzugen.

Zusätzlich

Der Standardexport ist eigentlich ein benannter Export mit dem Namen default. Der Standardexport kann importiert werden als:

import {default as Sample} from '../Sample.js';
33
Deepak Sharma

Wenn Sie import nur als Syntaxzucker für Knotenmodule, Objekte und Destrukturierung betrachten, finde ich das ziemlich intuitiv.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';
11
Brandon

normalerweise müssen Sie beim Exportieren einer Funktion die {} verwenden.

if you have export const x 

sie verwenden import {x} from ''

if you use export default const x 

sie müssen import X from ''.__ verwenden. Dort können Sie X in die gewünschte Variable ändern 

2
jadlmir

Um die Verwendung von geschweiften Klammern in import-Anweisungen zu verstehen, müssen Sie zunächst das Konzept destructing , eingeführt in ES6

  1. Objektzerstörung

    var bodyBuilder = {
      firstname: 'Kai',
      lastname: 'Greene',
      nickname: 'The Predator'
    };
    
    var {firstname, lastname} = bodyBuilder;
    console.log(firstname, lastname); //Kai Greene
    
    firstname = 'Morgan';
    lastname = 'Aste';
    
    console.log(firstname, lastname); // Morgan Aste
    
  2. Array-Zerstörung

    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
    
    console.log(firstGame); // Gran Turismo
    

    Listenabgleich verwenden

      var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
      console.log(secondGame); // Burnout
    

    Verwenden des Spread-Operators

    var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(firstGame);// Gran Turismo
    console.log(rest);// ['Burnout', 'GTA'];
    

Nun, da wir das nicht mehr können, können Sie mit ES6 mehrere Module exportieren. Sie können dann die Objektzerstörung wie unten verwenden

Nehmen wir an, Sie haben ein Modul namens module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Sie möchten die exportierten Funktionen in index.js importieren.

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Sie können auch verschiedene Variablennamen verwenden

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');
1
theTypan

Die geschweiften Klammern ({}) werden zum Importieren benannter Bindungen verwendet. Das Konzept dahinter ist die destruktive Zuweisung.

Eine einfache Demonstration, wie import-Anweisung mit einem Beispiel funktioniert, kann in meiner eigenen Antwort auf eine ähnliche Frage bei gefunden werden.

0
Samuel J Mathew

Zusammenfassung ES6 Module:

export:

Sie haben 2 Arten von Exporten:

  1. Genannte Exporte 
  2. Standardexporte, max. 1 pro Modul

Syntax:

// Module A
export const importantData_1 = 1;
export const importantData_1 = 2;
export default function foo () {}

Importe:

Der Exporttyp (d. H. Benannte Exporte oder Standardexporte) beeinflusst, wie etwas importiert wird:

  1. Für einen benannten Export müssen geschweifte Klammern und genauer Name als Deklaration (d. H. Variable, Funktion oder Klasse) verwendet werden, die exportiert wurde.
  2. Für einen Standardexport können wir den Namen auswählen.

Syntax:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

Sehenswürdigkeiten:

  1. Verwenden Sie eine durch Kommas getrennte Liste in geschweiften Klammern mit übereinstimmender Name des Exports für den benannten Export.
  2. Verwenden Sie einen Namen Ihrer Wahl ohne geschweifte Klammern für einen Standardexport.

Aliase:

Wenn Sie einen benannten Import umbenennen möchten, ist dies über Aliasnamen möglich. Die Syntax dafür ist folgende:

import { importantData_1 as myData } from './A';

Nun haben wir importantData_1 importiert, aber der Bezeichner ist myData anstelle von importantData_1.

0