Использование скобок с синтаксисом импорта javascript

Ответ 1

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

Это говорит:

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

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

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

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

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

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

import name from "module-name";

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

Еще один способ объяснить это - отметить, что указанный импорт точно идентичен

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

и пример OP точно идентичен

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

В документации MDN появился пример

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

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

Импортировать содержимое всего модуля, причем некоторые из них также явно указаны. Это вставляет myModule (sic), 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';

Ответ 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'

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

// 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. Однако, по-видимому, он нуждается в техническом обзоре. Dr. Аккаунт Axel Rauschmayer является лучшей ссылкой на данный момент.