Kiedy należy używać nawiasów klamrowych do importowania ES6?

Wydaje się to oczywiste, ale byłem trochę zdezorientowany, kiedy używać nawiasów klamrowych do importowania jednego modułu w ES6. Na przykład w projekcie React-Native, nad którym pracuję, mam następujący plik i jego zawartość:

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;

W TodoReducer.js muszę go zaimportować bez nawiasów klamrowych:

import initialState from './todoInitialState';

Jeśli dołączę initialStatenawiasy klamrowe, pojawia się następujący błąd dla następującego wiersza kodu:

Nie można odczytać todo właściwości niezdefiniowanej

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

Podobne błędy zdarzają się również w moich komponentach z nawiasami klamrowymi. Zastanawiałem się, kiedy powinienem użyć nawiasów klamrowych do pojedynczego importu, ponieważ oczywiście podczas importowania wielu komponentów / modułów musisz je zamknąć w nawiasach klamrowych, które znam.

Edytować:

Post SO tutaj tutaj nie odpowiada na moje pytanie, zamiast tego pytam, kiedy powinienem lub nie powinienem używać nawiasów klamrowych do importowania pojedynczego modułu, lub nigdy nie powinienem używać nawiasów klamrowych do importowania pojedynczego modułu w ES6 (najwyraźniej nie jest to przypadek, ponieważ widziałem pojedynczy import z wymaganymi nawiasami klamrowymi)

To jest domyślny import :

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

Działa tylko wtedy, gdy Ama domyślny eksport :

// A.js
export default 42

W takim przypadku nie ma znaczenia, jaką nazwę mu nadasz podczas importowania:

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

Bo zawsze będzie rozwiązać, aby cokolwiek jest domyślny eksport z A.

Jest to nazwany import o nazwieA :

import { A } from './A'

Działa tylko wtedy, gdy Azawiera nazwany eksport o nazwieA :

export const A = 42

W tym przypadku nazwa ma znaczenie, ponieważ importujesz konkretną rzecz według nazwy eksportu :

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

Aby te działały, należy dodać odpowiedni nazwany eksport do A:

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

Moduł może mieć tylko jeden domyślny eksport , ale tyle nazwanych eksportów, ile chcesz (zero, jeden, dwa lub wiele). Możesz zaimportować je wszystkie razem:

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

Tutaj import eksport jako domyślny A, i nazwał eksportu nazwie myAi Something, odpowiednio.

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

Możemy również przypisać im wszystkie różne nazwy podczas importowania:

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

Domyślny eksport jest zwykle używany do wszystkiego, czego normalnie oczekujesz od modułu. Nazwane eksporty są zwykle używane do narzędzi, które mogą być przydatne, ale nie zawsze są konieczne. Jednak to Ty decydujesz, jak eksportować rzeczy: na przykład moduł może w ogóle nie mieć domyślnego eksportu.

Jest to świetny przewodnik po modułach ES, wyjaśniający różnicę między eksportem domyślnym a nazwanym.

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

Zobacz więcej odpowiedzi Dana Abramova powyżej.

Powiedziałbym, że istnieje także notacja importoznaczona gwiazdką dla słowa kluczowego ES6.

Jeśli spróbujesz konsolować log Mix:

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

Dostaniesz:

Kiedy należy używać nawiasów klamrowych do importowania ES6?

Wsporniki są złote, gdy potrzebujesz tylko określonych komponentów z modułu, co sprawia, że ​​zajmują mniej miejsca dla pakujących, takich jak webpack.

Powyższa odpowiedź Dana Abramova wyjaśnia domyślny eksport i nazwany eksport .

Którego użyć?

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

Jednak w TypeScript preferowany jest eksport o nazwie ze względu na refaktoryzację. Przykład: jeśli domyślnie wyeksportujesz klasę i zmienisz jej nazwę, nazwa klasy zmieni się tylko w tym pliku, a nie w innych referencjach, a nazwa klasy eksportu o nazwie zostanie zmieniona we wszystkich referencjach. Eksport nazwany jest również preferowany w przypadku narzędzi.

Ogólnie używaj, co chcesz.

Dodatkowy

Domyślny eksport jest tak naprawdę nazwanym eksportem o nazwie default, więc domyślny eksport można zaimportować jako:

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

Jeśli myślisz o importcukrze 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 importinstrukcjach, najpierw musisz zrozumieć koncepcję niszczenia wprowadzoną w ES6

1. Niszczenie 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. Niszczenie tablic

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

   Korzystanie z dopasowywania listy

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

   Korzystanie z operatora rozrzucania

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

Teraz, gdy mamy to za sobą, w ES6 możesz eksportować wiele modułów. Następnie możesz skorzystać z funkcji niszczenia 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żesz także użyć różnych nazw zmiennych

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

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

ES6Moduły podsumowujące :

eksport:

Masz 2 rodzaje eksportu:

1. Nazwany eksport
2. Domyślny eksport, maksymalnie 1 na moduł

Składnia:

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

Import:

Rodzaj eksportu (tj nazwie lub eksport domyślne) wpływa Jak importować coś:

1. W przypadku nazwanego eksportu musimy użyć nawiasów klamrowych i dokładnej nazwy jako deklaracji (tj. Zmiennej, funkcji lub klasy), która została wyeksportowana.
2. W przypadku domyślnego eksportu możemy wybrać nazwę.

Składnia:

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

Ciekawe rzeczy:

1. Użyj rozdzielonej przecinkami listy w nawiasach klamrowych z pasującą nazwą eksportu dla nazwanego eksportu.
2. Użyj domyślnej nazwy bez nawiasów klamrowych do domyślnego eksportu.

Skróty:

Ilekroć chcesz zmienić nazwę nazwanego importu, jest to możliwe poprzez aliasy . Składnia tego jest następująca:

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

Teraz zaimportowaliśmy, importantData_1 ale identyfikator jest myDatazamiast importantData_1.

zwykle 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ą, którą chcesz

Nawiasy klamrowe ({}) są używane do importowania nazwanych powiązań, a ich podstawą jest przypisanie destrukcyjne

Prostą demonstrację działania instrukcji importu na przykładzie można znaleźć we własnej odpowiedzi na podobne pytanie w Kiedy używamy „{}” w imporcie javascript?

Nawiasy klamrowe są używane tylko do importu, gdy nazwany jest eksport. Jeśli eksport jest domyślny, wówczas do importu nie są używane nawiasy klamrowe.

Do domyślnego eksportu nie używamy {} podczas importu.

na przykład

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

Jeśli chcemy zaimportować wszystko, co eksportujemy, używamy *