javascript - JavaScript インポート構文で括弧を使用する

Question

次の構文を使用してライブラリをインポートする JavaScript ライブラリを見つけました。

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

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

import React, Component, PropTypes from 'react';

Answer 1

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

これにより、モジュールからエクスポートさ{ Component, PropTypes }れたメンバーが取得され、それぞれと'react'に割り当てられます。モジュールのエクスポートと同じになります。ComponentPropTypesReactdefault

以下 虎三郎 が 指摘 する ように 、 これ は と 同じ 。

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 の新しいドキュメントを参照してください。ただし、明らかに技術的なレビューが必要です。Dr. Axel Rauschmayer のブログ投稿は、現時点ではより適切なリファレンスです。