Я наткнулся на библиотеку javascript, которая использует следующий синтаксис для импорта библиотек:
import React, { Component, PropTypes } from 'react';
В чем разница между вышеуказанным методом и следующим?
import React, Component, PropTypes from 'react';
Ответы:
Это говорит:
Это объединяет два общих синтаксиса, которые вы, вероятно, видели
Первый используется для импорта и наименования экспорта по умолчанию, второй - для импорта указанного именованного экспорта.
Как правило, большинство модулей предоставляют либо один экспорт по умолчанию, либо список именованных экспортов. Несколько реже, когда модуль предоставляет как экспорт по умолчанию, так и именованный экспорт. Однако в случае, когда есть одна функция, которая чаще всего импортируется, а также дополнительные подфункции, допустимо экспортировать первую по умолчанию, а остальные - как именованные экспорты. Именно в таких случаях вы должны использовать
import
синтаксис, на который вы ссылаетесь.Другие ответы находятся где-то между неправильным и запутанным, возможно, потому, что документы MDN на момент, когда был задан этот вопрос, были неправильными и сбивающими с толку. MDN показал пример
и сказано
name
- это «имя объекта, который получит импортированные значения». Но это заблуждение и неверно; во-первых, есть только одно значение импорта, которое будет «получено» (почему бы просто не сказать «назначено» или «используется для ссылки»)name
, а значение импорта в этом случае является экспортом по умолчанию из модуля .Другой способ объяснить это - отметить, что приведенный выше импорт в точности идентичен
и пример OP в точности идентичен
В документации MDN был показан пример.
и утверждал, что это означает
То, что здесь сказал MDN, и то, что другие ответы утверждают, основанные на неверной документации MDN, абсолютно неверно и может быть основано на более ранней версии спецификации. На самом деле это
(Экспорт модуля по умолчанию - это значение, экспортированное с
export default
синтаксисом, который также может бытьexport {foo as default}
.)Авторы документации MDN могли запутаться в следующей форме:
Это импортирует весь экспорт из файлов
my-module
и делает их доступными под такими именами, какMyModule.name
. Экспорт по умолчанию также доступен какMyModule.default
, поскольку экспорт по умолчанию на самом деле не что иное, как другой именованный экспорт с именемdefault
. В этом синтаксисе нет способа импортировать только подмножество именованных экспортов, хотя можно импортировать экспорт по умолчанию, если он есть, вместе со всеми именованными экспортами, систочник
from '/path/to/my-module.js'
, хотя лично пользуюсьfrom '/path/to/my-module'
.Это будет захватывать экспортируемые
{ Component, PropTypes }
элементы из'react'
модуля и присвоить ихComponent
иPropTypes
, соответственно.React
будет равноdefault
экспорту модуля .Как отмечает торазабуро ниже , это то же самое, что
что является сокращением для
Вот еще один пример ( ссылка на суть ):
Второй пример я проверил с помощью babel:
и получил синтаксическую ошибку.
Для справки вы можете прочитать новую
import
документацию от MDN. Однако очевидно, что он нуждается в техническом рассмотрении. Сообщение в блоге доктора Акселя Раушмайера - лучшая ссылка на данный момент.источник
React
, а также именованные экспортComponent
иPropTypes
переменные с тем же именем. К сожалению, документы MDN ошибочны, как вы могли бы понять, если бы попробовали. См. 2ality.com/2014/09/es6-modules-final.html . Кроме того, синтаксис импорта не имеет ничего общего с деструктурирующим назначением.import
документации», в котором рассматривается история изменений этой статьи MDN, части, которые вы цитируете, не редактировались с тех пор, как страница была впервые написана более года назад, то есть периода, в течение которого синтаксис модуля был быстро меняетсяexample3.js
почему это напечататьundefined
дляconsole.log(d)
? Поскольку вы это сделали,export default { a, b, d }
вы экспортировали его в форматеmyModule.js
.myModule.js
, отметим , чтоa
,b
иc
были вывезены в индивидуальном порядке . Это означает, что другой файл может импортировать их напрямую с помощьюimport { a } from 'myModule'
. С другой стороны,d
он доступен только через экспорт по умолчанию, поэтому другой модуль может получить к нему доступ двумя способами:import thisObjectContainsDefault from 'myModule'
и получить к нему доступ черезthisObjectContainsDefault.d
ИЛИimport { default as wrapperObject }
иwrapperObject.d
. Преимущество второго подхода заключается в том, что вы также можете захватывать элементы, которые были экспортированы индивидуально, как это видно наexample3.js
.