javascript - import ステートメントは、モジュールメンバーを未定義として返します

Question

モジュール ( ./lib/myModule.js):

const X = 10;

export default { X }

メインモジュール ( ./index.js):

ケース 1:

import { X } from './lib/myModule'

console.log(X) // undefined

ケース 2:

import myModule from './lib/myModule'

const { X } = myModule;

console.log(myModule.X) // 10
console.log(X) // 10

オブジェクト一致表記Xを未定義として返し、完全なオブジェクトをインポートすると、メンバーが値を保持するのはなぜですか? 最初のケースの何が問題になっていますか?

私は ES 6 コードをで変換するために Babel を使用していpreset-es2015ます。

score 3 · Accepted Answer

これは、インポートステートメントが分割代入を使用していないためです。X最初のケースでは、エクスポートされていないmember をインポートしようとしています。2 番目のケースでは、デフォルトメンバーをインポートしてから、構造化代入Xを使用してそこから抽出しています。

最初のケースでは、Babelconsole.log()は行を次のように変換します。

console.log(_myModule.X); // undefined

一方、2 番目のケースでは、次のようになります。

console.log(_myModule2.default.X);

javascript - import ステートメントは、モジュール メンバーを未定義として返します