Kiedy należy używać curly szelki do ES6 import?

TL; DR: nawiasy klamrowe są używane, jeśli chcesz zaimportować niestandardowy eksport.

Zobacz odpowiedź dana Abramovsa powyżej, aby uzyskać więcej szczegółów.

Powiedziałbym, że istnieje również zapis gwiazdkowy dla słowa kluczowego import ES6, o którym warto wspomnieć.

If you try to console log Mix:

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

Otrzymasz:

Kiedy należy używać curly braces do importu ES6?

Nawiasy są złote, gdy potrzebujesz tylko określonych komponentów z modułu, co sprawia, że mniejsze footprinty dla bundlerów, takich jak webpack.

Dan Abramov odpowiedź powyżej wyjaśnia o domyślnych eksportach i nazwanych eksportach .

Którego użyć?

cytując Davida Hermana : ECMAScript 6 faworyzuje pojedynczy / domyślny styl eksportu i daje najsłodszą składnię importowania domyślnego. Importowanie nazwanego eksportu może, a nawet powinien być nieco mniej zwięzły.

Jednak w maszynopisie o nazwie export jest preferowany ze względu na refaktoryzację. Przykład, jeśli domyślnie eksportujesz klasę i zmieniasz nazwę to, nazwa klasy zmieni się tylko w tym pliku, a nie w innych referencjach, z nazwanym eksportem nazwa klasy zostanie zmieniona we wszystkich referencjach. Eksport nazw jest również preferowany dla narzędzi.

Ogólnie używaj, co chcesz.

Dodatkowe

Default export jest w rzeczywistości nazwanym eksportem z name default, więc default export może być importowany jako:

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

Jeśli myślisz o import jako o cukrze składniowym dla modułów węzłów, obiektów i destrukcji, uważam, że jest to dość intuicyjne.

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

Aby zrozumieć użycie nawiasów klamrowych w wypowiedziach import, najpierw trzeba zrozumieć pojęcie destrukcji wprowadzone w ES6

1. Destrukcja obiektów

   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. Destrukcja tablicy

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

   Using list matching

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

   Używając operatora spreadu

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

Teraz, gdy mamy to z drogi, w ES6 możesz eksportować wiele modułów. Następnie możesz użyć destrukcji obiektów, jak poniżej

Załóżmy, że masz moduł o nazwie module.js

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

Chcesz zaimportować wyeksportowane funkcje do index.js;

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

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

Można również używać różnych nazw zmiennych jak tak

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

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

Zazwyczaj podczas eksportowania funkcji musisz użyć {}

if you have export const x 

Używasz import {x} from ''

if you use export default const x 

Musisz użyć import X from '' tutaj możesz zmienić X na dowolną zmienną

Nawiasy klamrowe ({}) są używane do importowania nazwanych wiązań i koncepcją stojącą za nimi jest przypisanie destrukcji

Prosta demonstracja działania instrukcji import na przykładzie znajduje się w mojej własnej odpowiedzi na podobne pytanie pod adresem kiedy używamy '{ }' w importach javascript?