[解決済み] 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 はインポートされた値を受け取るオブジェクトの名前です。 一つ インポートされた値を受け取ります。（単に "assigned to" または "used to refer to" と言ってはいけません。） 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';