Natknąłem się na bibliotekę javascript, która używa następującej składni do importowania bibliotek:
import React, { Component, PropTypes } from 'react';
Jaka jest różnica między powyższą metodą a następującą?
import React, Component, PropTypes from 'react';
Odpowiedzi:
To mówi:
Łączy w sobie dwie popularne składnie, które prawdopodobnie widzieliście
Pierwsza służy do importowania i nadawania nazwy domyślnemu eksportowi, a druga do importowania określonych nazwanych eksportów.
Z reguły większość modułów zapewnia pojedynczy, domyślny eksport lub listę nazwanych eksportów. Nieco rzadziej moduł udostępnia zarówno domyślny eksport, jak i nazwane eksporty. Jednak w przypadku, gdy istnieje jedna cecha, która jest najczęściej importowana, ale także dodatkowe funkcje podrzędne, prawidłowym projektem jest eksportowanie pierwszej jako domyślnej, a pozostałych jako nazwanych eksportów. W takich przypadkach użyjesz
import
składni, do której się odnosisz.Pozostałe odpowiedzi są gdzieś pomiędzy błędnymi a zagmatwanymi, być może dlatego, że dokumenty MDN w momencie zadawania tego pytania były błędne i zagmatwane. MDN pokazał przykład
i mówi się, że
name
jest to „nazwa obiektu, który otrzyma zaimportowane wartości”. Ale to mylące i niepoprawne; po pierwsze jest tylko jedna wartość importu, która zostanie „odebrana” (dlaczego nie powiedzieć po prostu „przypisany do” lub „używany do odniesienia się do”)name
, a wartość importu w tym przypadku jest domyślnym eksportem z modułu .Innym sposobem wyjaśnienia tego jest zauważenie, że powyższy import jest dokładnie identyczny z
a przykład PO jest dokładnie identyczny z
W dalszej części dokumentacji MDN pokazano przykład
i twierdził, że to oznacza
To, co tu powiedział MDN i jakie inne odpowiedzi twierdzą na podstawie niewłaściwej dokumentacji MDN, jest całkowicie błędne i może opierać się na wcześniejszej wersji specyfikacji. To, co to właściwie robi, to
(Domyślnym eksportem modułu jest wartość eksportowana ze
export default
składnią, która również może byćexport {foo as default}
.)Autorzy dokumentacji MDN mogli pomylić się z następującą formą:
Spowoduje to zaimportowanie wszystkich eksportów z
my-module
i udostępnienie ich pod nazwami, takimi jakMyModule.name
. Domyślny eksport jest również dostępny jakoMyModule.default
, ponieważ domyślny eksport to nic innego jak inny nazwany eksport o nazwiedefault
. W tej składni nie ma możliwości zaimportowania tylko podzbioru nazwanych eksportów, chociaż można zaimportować domyślny eksport, jeśli istnieje, razem ze wszystkimi nazwanymi eksportami, zźródło
from '/path/to/my-module.js'
, chociaż ja osobiście używamfrom '/path/to/my-module'
.Spowoduje to pobranie wyeksportowanych
{ Component, PropTypes }
członków z'react'
modułu i przypisanie ich odpowiednio doComponent
iPropTypes
.React
będzie równadefault
eksportowi modułu .Jak zauważył torazaburo poniżej , to jest to samo co
co jest skrótem dla
Oto kolejny przykład ( link do sedna ):
Przetestowałem drugi przykład z babel:
i wystąpił błąd składni.
W celach informacyjnych możesz przeczytać nową
import
dokumentację z MDN. Jednak najwyraźniej wymaga przeglądu technicznego. Post na blogu dr Axela Rauschmayera jest teraz lepszym odniesieniem.źródło
React
, a nazwane eksportyComponent
iPropTypes
zmienne o tej samej nazwie. Niestety, dokumenty MDN są błędne, o czym dowiedziałbyś się, gdybyś spróbował. Zobacz 2ality.com/2014/09/es6-modules-final.html . Ponadto składnia importu nie ma absolutnie nic wspólnego z przydziałem destrukturyzacji.import
dokumentacji”, przeglądając historię wersji tego artykułu w MDN, części, które cytujesz, nie zostały poprawione od czasu, gdy strona została napisana po raz pierwszy ponad rok temu, czyli w okresie, w którym składnia modułu była szybko się zmieniaexample3.js
dlaczego to wydrukowaćundefined
zaconsole.log(d)
? Ponieważ to zrobiłeśexport default { a, b, d }
, wyeksportowałeś go w formaciemyModule.js
.myModule.js
pamiętać, żea
,b
ic
były wywożone indywidualnie. Oznacza to, że inny plik może je zaimportować bezpośrednio zimport { a } from 'myModule'
. Z drugiej stronyd
jest dostępny tylko za pośrednictwem domyślnego eksportu, więc inny moduł może uzyskać do niego dostęp na dwa sposoby:import thisObjectContainsDefault from 'myModule'
i uzyskać do niego dostęp przezthisObjectContainsDefault.d
ORimport { default as wrapperObject }
iwrapperObject.d
. Zaletą drugiego podejścia jest to, że możesz również pobrać elementy, które zostały wyeksportowane pojedynczo, jak widać naexample3.js
.