ブラケットをJavaScriptインポート構文で使用する

次の構文を使用してライブラリをインポートするJavaScriptライブラリに出くわしました。

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

上記の方法と次の方法の違いは何ですか？

import React, Component, PropTypes from 'react';

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

これは言う：

インポートデフォルトからの輸出'react'名の下にReactして、インポートという名前の輸出をComponentし、PropTypes同じ名前の下に。

これは、おそらくあなたが見たことがある2つの一般的な構文を組み合わせたものです

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

最初はデフォルトのエクスポートのインポートと名前付けに使用され、2番目は指​​定された名前付きエクスポートのインポートに使用されます。

原則として、ほとんどのモジュールは、単一のデフォルトのエクスポート、または名前付きエクスポートのリストを提供します。モジュールがデフォルトのエクスポートと名前付きエクスポートの両方を提供することは、あまり一般的ではありません。ただし、最もよくインポートされる機能が1つだけでなく、追加のサブ機能もある場合、最初の機能をデフォルトとしてエクスポートし、残りの機能を名前付きエクスポートとしてエクスポートすることは有効な設計です。そのような場合は、import参照する構文を使用します。

他の答えは、おそらくこの質問が尋ねられたときのMDNドキュメントが間違っていて混乱しているため、間違っていると混乱の間にあります。MDNが例を示した

import name from "module-name";

そして、言っnameている「インポートした値を受け取るオブジェクトの名前。」しかし、それは誤解を招きやすく、正しくありません。まず最初に、「受信」されるインポート値は1つだけです（「割り当てられた」または「参照に使用された」と言うだけではありません）name。この場合のインポート値は、モジュールからのデフォルトのエクスポートです。 。

これを説明するもう1つの方法は、上記のインポートは、

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によりfoo、（sic）、、、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';

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...'

2番目の例を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 | 

参考までに、importMDNの新しいドキュメントを参照してください。ただし、明らかに技術的な見直しが必要です。今のところ、Axel Rauschmayer博士のブログ投稿が参考になります。