Próbuję ustalić, czy istnieją między nimi duże różnice, poza tym, że mogę je importować, export default
wykonując po prostu:
import myItem from 'myItem';
I używając export const
mogę zrobić:
import { myItem } from 'myItem';
Zastanawiam się, czy istnieją jakieś różnice i / lub przypadki użycia inne niż to.
javascript
ecmascript-6
es6-modules
ajmajmajma
źródło
źródło
const
spowoduje, że identyfikator będzie tylko do odczytu. Tak więc w przypadku pierwotnych wartości można uznać to za niezmienne. Zauważ, że sama wartość nie jest niezmienna, więc obiekty, tablice itp. Można zmienić - tylko nie przypisać ponownie.const
.Odpowiedzi:
Jest to eksport nazwany a domyślny eksport.
export const
to nazwany eksport, który eksportuje stałą deklarację lub deklaracje.Aby podkreślić: ważne jest tutaj
export
słowo kluczoweconst
używane do deklarowania stałej deklaracji lub deklaracji.export
mogą być również stosowane do innych deklaracji, takich jak deklaracje klas lub funkcji.Domyślny eksport (
export default
)Możesz mieć jeden domyślny eksport na plik. Podczas importowania musisz podać nazwę i zaimportować w następujący sposób:
Możesz nadać temu dowolne imię.
Nazwany eksport (
export
)Dzięki nazwanym eksportom możesz mieć wiele nazwanych eksportów na plik. Następnie zaimportuj określony eksport w nawiasach klamrowych:
Lub można użyć wartości domyślnej wraz z nazwanymi importami w tym samym zestawieniu:
Import przestrzeni nazw
Możliwe jest również zaimportowanie wszystkiego z pliku na obiekt:
Notatki
Domyślny eksport to tak zwany eksport o nazwie,
default
dzięki czemu można go zaimportować za pomocą importu o nazwie:źródło
export default
wpływa na składnię podczas importowania eksportowanej „rzeczy”, podczas zezwalania na importowanie wszystkiego, co zostało wyeksportowane, poprzez wybranie samej nazwyimport
, bez względu na to, jaka była nazwa podczas eksportowania, po prostu dlatego, że jest oznaczona jako „domyślna”.Przydatnym przypadkiem użycia, który lubię (i używam), jest możliwość wyeksportowania anonimowej funkcji bez wyraźnego nadawania jej nazwy, a tylko po zaimportowaniu tej funkcji należy nadać jej nazwę:
Przykład:
Eksportuj 2 funkcje, jedna to
default
:Zaimportuj powyższe funkcje. Wymyślając nazwę dla tego
default
:Kiedy
{}
składnia jest używana do importowania funkcji (lub zmiennej), oznacza to, że wszystko, co jest importowane, było już nazwane podczas eksportowania, więc należy zaimportować je pod dokładnie taką samą nazwą, w przeciwnym razie import nie zadziała.Błędne przykłady:
Domyślna funkcja musi być najpierw importowana
divide_1
nie został wyeksportowanymodule_1.js
, więc nic nie zostanie zaimportowanesquare
nie został wyeksportowanymodule_1.js
, ponieważ{}
nakazuje silnikowi jawne wyszukiwanie tylko nazwanych eksportów.źródło
import something from
zamiastimport { somethingNamed } from
.Drobna uwaga: pamiętaj, że podczas importowania z domyślnego eksportu nazewnictwo jest całkowicie niezależne. Ma to faktycznie wpływ na refaktoryzację.
Załóżmy, że masz taką klasę
Foo
z odpowiednim importem:Teraz, jeśli zmienisz
Foo
klasę na swoją,Bar
a także zmienisz nazwę pliku, większość IDE NIE dotknie twojego importu. Skończysz z tym:Szczególnie w maszynopisie naprawdę doceniam nazwany eksport i bardziej niezawodne refaktoryzowanie. Różnica polega tylko na braku
default
słowa kluczowego i nawiasów klamrowych. To również zapobiega tworzeniu literówki w imporcie, ponieważ teraz masz sprawdzanie typów.źródło
import { Foo as Anything } from …
jak to możliweimport Anything from …
przy domyślnych eksportach.as
tak naprawdę nie jest celem tego komentarza źródłowego. Dzięki za przegłosowanie; pexport default
do eksportu głównego obiektu projektu, w szczególności z pakietów npm (zastępuje amodule.exports =
). Ale wewnętrznie w projekcie lepiej jest używać tylko nazwanego eksportu.Z dokumentacji :
źródło
Po ustawieniu domyślnym nazywany jest domyślnym eksportem. Możesz mieć tylko jeden domyślny eksport na plik i możesz go zaimportować do innego pliku o dowolnej nazwie. Jeśli nie ustawisz wartości domyślnej, nazywanej eksportem, musisz zaimportować ją do innego pliku, używając tej samej nazwy z nawiasami klamrowymi w środku.
źródło
Miałem problem, że przeglądarka nie używa ES6.
Naprawiłem to za pomocą:
Moduł typu mówi przeglądarce, aby używała ES6.
To powinno działać.
źródło