с помощью скобок с яваскрипта импорта синтаксиса

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 в то время, когда этот вопрос задавали, были неправильными и запутанными. 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 (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'; 

Answer 2

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

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

As noted by torazaburo below, это то же самое, как

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

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

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

Вот еще один пример (link to 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...' 

---

Я проверил S пример с 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's blog post - лучшая ссылка на данный момент.