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

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.

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

Wenn Sie versuchen, Log Mix zu konservieren:

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

Sie erhalten:

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.

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';

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';

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 

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');

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.

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.