web-dev-qa-db-ja.com

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

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

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

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

import React, Component, PropTypes from 'react';
javascriptecmascript-6es6-modules
107
fox
import React, { Component, PropTypes } from 'react';

これは言う：

名前Reactの下の'react'からdefaultエクスポートをインポートし、同じ名前の下のnamedエクスポートComponentおよびPropTypesをインポートします。

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

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

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

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

他の答えは間違っているか混乱しているかのどちらかです。おそらく、この質問が出された時点のMDN文書が間違っていて混乱していたからでしょう。 MDNは例を示しました

import name from "module-name";

そして、nameは「インポートされた値を受け取るオブジェクトの名前」であると述べました。しかし、それは誤解を招き、間違っています。まず、インポート値はoneのみです。これは「受信」（単に「割り当て」または「参照に使用」とは言いません）name、およびインポート値この場合、モジュールからのdefault exportです。

これを説明する別の方法は、上記のインポートが次とまったく同じであることに注意することです

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はnotMyModuleを介してアクセス可能です。これはdefaultexportであり、すべてのエクスポートをカバーするアンブレラではありません。

（デフォルトのモジュールエクスポートは、export default構文でエクスポートされた値であり、export {foo as default}の場合もあります。）

MDNドキュメントライターは、次のフォームと混同している可能性があります。

import * as MyModule from 'my-module';

これにより、すべてのエクスポートがmy-moduleからインポートされ、MyModule.nameなどの名前でアクセスできるようになります。デフォルトのエクスポートは、defaultという名前の別の名前付きエクスポートにすぎないため、デフォルトのエクスポートにはMyModule.defaultとしてもアクセスできます。この構文では、名前付きエクスポートのサブセットのみをインポートする方法はありませんが、デフォルトのエクスポートがあれば、すべての名前付きエクスポートと一緒にデフォルトのエクスポートをインポートできます

import myModuleDefault, * as myModule from 'my-module';
165
user663031
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 |

参考のために、MDNの新しいドキュメント import をご覧ください。ただし、明らかに技術レビューが必要です。 Dr。Axel Rauschmayerのブログ投稿 は今のところより良いリファレンスです。

37
royhowie