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ść:
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;
W TodoReducer.js muszę go zaimportować bez nawiasów klamrowych:
import initialState from './todoInitialState';
Jeśli dołączę initialState
nawiasy klamrowe, pojawia się następujący błąd dla następującego wiersza kodu:
TodoReducer.js: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)
źródło
Odpowiedzi:
To jest domyślny import :
Działa tylko wtedy, gdy
A
ma domyślny eksport :W takim przypadku nie ma znaczenia, jaką nazwę mu nadasz podczas importowania:
Bo zawsze będzie rozwiązać, aby cokolwiek jest domyślny eksport z
A
.Jest to nazwany import o nazwie
A
:Działa tylko wtedy, gdy
A
zawiera nazwany eksport o nazwieA
:W tym przypadku nazwa ma znaczenie, ponieważ importujesz konkretną rzecz według nazwy eksportu :
Aby te działały, należy dodać odpowiedni nazwany eksport do
A
: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:
Tutaj import eksport jako domyślny
A
, i nazwał eksportu nazwiemyA
iSomething
, odpowiednio.Możemy również przypisać im wszystkie różne nazwy podczas importowania:
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.
źródło
export const myA = 43; export const Something = 44;
a także zexport default { myA, Something }
? Więc kiedy importujesz, możesz alboimport A from './A';
dla wszystkiego w module, alboimport { Something } from './A';
też dostajesz tylko część modułuimport * as AllTheThings
.import 'firebase/storage';
lubimport 'rxjs/add/operator/map';
. Co to właściwie robi?TL; DR : Nawiasy klamrowe są używane, jeśli chcesz zaimportować niestandardowy eksport.
Zobacz więcej odpowiedzi Dana Abramova powyżej.
źródło
Powiedziałbym, że istnieje także notacja
import
oznaczona gwiazdką dla słowa kluczowego ES6.Jeśli spróbujesz konsolować log Mix:
Dostaniesz:
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.
źródło
import * as Mix from "./A";
iimport A as Mix from "./A";
takie same?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:
źródło
Additional
Linia jest dobra informacja.import A from './A'
nie ma sensu, jeśli eksportujesz bez zdefiniowania nazwy takiej jakexport default 42
.Jeśli myślisz o
import
cukrze składniowym dla modułów węzłów, obiektów i destrukcji, uważam, że jest to dość intuicyjne.źródło
Aby zrozumieć użycie nawiasów klamrowych w
import
instrukcjach, najpierw musisz zrozumieć koncepcję niszczenia wprowadzoną w ES6Niszczenie obiektów
Niszczenie tablic
Korzystanie z dopasowywania listy
Korzystanie z operatora rozrzucania
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
Chcesz zaimportować wyeksportowane funkcje do
index.js
;Możesz także użyć różnych nazw zmiennych
źródło
import {printFirstname as pFname, printLastname as pLname} from './module.js'
jest równoważne z:var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');
ES6
Moduły podsumowujące :eksport:
Masz 2 rodzaje eksportu:
Składnia:
Import:
Rodzaj eksportu (tj nazwie lub eksport domyślne) wpływa Jak importować coś:
Składnia:
Ciekawe rzeczy:
Skróty:
Ilekroć chcesz zmienić nazwę nazwanego importu, jest to możliwe poprzez aliasy . Składnia tego jest następująca:
Teraz zaimportowaliśmy,
importantData_1
ale identyfikator jestmyData
zamiastimportantData_1
.źródło
zwykle podczas eksportowania funkcji musisz użyć {}
używasz
import {x} from ''
musisz użyć
import X from ''
tutaj, możesz zmienić X na dowolną zmienną, którą chceszźródło
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?
źródło
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.
źródło
Do domyślnego eksportu nie używamy {} podczas importu.
na przykład
player.js
index.js
index.js
player.js
Jeśli chcemy zaimportować wszystko, co eksportujemy, używamy *
źródło