[解決済み] デフォルトのエクスポートオブジェクトの再構築

質問

インポート時にデフォルトのエクスポート オブジェクトを再構築することはできますか。

次のようなエクスポート構文があるとします ( export default )

const foo = ...
function bar() { ... }

export default { foo, bar };

は、次のインポート構文が有効なJSでしょうか？

import { foo, bar } from './export-file';

私のシステムでは動作していますが、仕様によると動作しないはずだと言われたので、質問しました。

どのように解決するのですか?

インポート時にデフォルトのエクスポートオブジェクトを再構築できますか？

いいえ。オブジェクトを変数にインポートした後にのみ、オブジェクトを再構築することができます。

インポート/エクスポートはオブジェクトリテラル/オブジェクトパターンとは完全に異なる構文とセマンティクスを持っていることに注意してください。唯一の共通点は、両方とも中括弧を使用し、その省略形表現 (識別子名とカンマのみ) は見分けがつかないということです。

次のインポート構文は有効なJSでしょうか？

import { foo, bar } from './export-file';

モジュールから2つの名前の付いたエクスポートをインポートしています。の省略記法です。

import { foo as foo, bar as bar } from './export-file';

というのは、バインディングを宣言する foo という名前でエクスポートされた変数を参照するようにします。 foo から export-file というバインディングを宣言し bar という名前でエクスポートされた変数を参照するようにします。 bar から export-file "です。

次のエクスポート構文（エクスポートのデフォルト）が与えられた場合

export default { foo, bar };

は、上記のインポートがこれで動作するのでしょうか？

いいえ。 これは不可視の変数を宣言して、それをオブジェクトで初期化することです。 { foo: foo, bar: bar } で初期化し、それを default .

このモジュールが export-file という名前でインポートすると default は使用されず、名前 foo と bar が見つからなくなり SyntaxError .

これを解決するには、デフォルトでエクスポートされるオブジェクトをインポートする必要があります。

import { default as obj } from './export-file';
const {foo: foo, bar: bar} = obj;
// or abbreviated:
import obj from './export-file';
const {foo, bar} = obj;

あるいは、import構文を維持したまま、代わりにnamed exportsを使用します。

export { foo as foo, bar as bar };
// or abbreviated:
export { foo, bar };
// or right in the respective declarations:
export const foo = …;
export function bar() { ... }