Используя скобки с синтаксисом импорта JavaScript

Question

Я натолкнулся на библиотеку JavaScript, которая использует следующий синтаксис для импорта библиотек:

import React, { Component, PropTypes } from 'react';

В чем разница между вышеуказанным методом и следующим?

import React, Component, PropTypes from 'react';

Answer 1

import React, { Component, PropTypes } from 'react';

Это говорит:

Импортировать экспорт по умолчанию из 'react' под именем React и импортировать названный экспорт Component а также PropTypes под такими же именами.

Это объединяет два общих синтаксиса, которые вы, вероятно, видели

import React from 'react';
import { Component, PropTypes } from 'react';

Первый используется для импорта и присвоения имени экспорту по умолчанию, второй - для импорта указанного именованного экспорта.

Как правило, большинство модулей предоставляют один экспорт по умолчанию или список именованных экспортов. Модуль несколько реже предоставляет как экспорт по умолчанию, так и экспорт по именам. Тем не менее, в случае, когда есть одна функция, которая чаще всего импортируется, но также и дополнительные подфункции, допустимым является экспорт первого по умолчанию, а остальных как именованных экспортов. Именно в таких случаях вы бы использовали import синтаксис, на который вы ссылаетесь.

Другие ответы находятся где-то между неправильным и запутанным, возможно, потому что документы MDN в то время, когда этот вопрос был задан, были неправильными и запутанными. МДН показал пример

import name from "module-name";

и сказал name это "имя объекта, который получит импортированные значения". Но это вводит в заблуждение и неправильно; во-первых, существует только одно значение импорта, которое будет "получено" (почему бы просто не сказать "назначено" или "использовано для ссылки") name и значение импорта в этом случае является экспортом по умолчанию из модуля.

Другой способ объяснить это состоит в том, чтобы отметить, что вышеупомянутый импорт точно идентичен

import { default as name } from "module-name";

и пример ОП точно идентичен

import { default as React, Component, PropTypes } from 'react';

Документация MDN пошла, чтобы показать пример

import MyModule, {foo, bar} from "my-module.js";

и утверждал, что это означает

Импортируйте содержимое всего модуля, причем некоторые из них также имеют явное имя. Это вставки myModule (Так в оригинале), foo, а также bar в текущем объеме. Обратите внимание, что foo а также myModule.foo такие же, как и bar а также myModule.bar

То, что MDN сказал здесь, и то, что утверждают другие ответы, основанные на неправильной документации MDN, абсолютно неверно и может основываться на более ранней версии спецификации. Что это на самом деле делает

Импортируйте модуль экспорта по умолчанию и некоторые экспорты с явно заданными именами. Это вставки MyModule, foo, а также bar в текущем объеме. Имена экспорта foo а также bar не доступны через MyModule, который является экспортом по умолчанию, а не какой-то зонтик, охватывающий весь экспорт.

(Экспорт модуля по умолчанию - это значение, экспортированное с export default синтаксис, который также может быть export {foo as default}.)

Авторы документации MDN могли быть перепутаны со следующей формой:

import * as MyModule from 'my-module';

Это импортирует весь экспорт из my-module и делает их доступными под такими именами, как MyModule.name, Экспорт по умолчанию также доступен как MyModule.default, так как экспорт по умолчанию - это не что иное, как другой экспорт с именем с именем default, В этом синтаксисе нет способа импортировать только подмножество именованных экспортов, хотя можно импортировать экспорт по умолчанию, если он есть, вместе со всеми именованными экспортами, с

import myModuleDefault, * as myModule from 'my-module';

Answer 2

import React, { Component, PropTypes } from 'react'

Это будет захватывать экспортируемые { Component, PropTypes } члены от 'react' модуль и назначить их Component а также PropTypes соответственно. React будет равен модулю default экспорт.

Как отмечено торазабуро ниже, это то же самое, что

import { default as React, Component, PropTypes } from 'react'

что является сокращением для

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

Вот еще один пример ( ссылка на суть):

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

---

Я проверил второй пример с Babel:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

и получил синтаксическую ошибку.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

---

Для справки, вы можете прочитать о новом importдокументация от MDN. Однако, по-видимому, нуждается в техническом рассмотрении. Сообщение в блоге доктора Акселя Раушмайера пока лучше.