javascript - ES6 の構造化とモジュールのインポート

Question

この構文は次のような印象を受けました。

import Router from 'react-router';
var {Link} = Router;

これと同じ最終結果になります。

import {Link} from 'react-router';

誰かが違いを説明できますか？

(当初はReact Router Bugだと思っていました。)

Answer 1

import {Link} from 'react-router';

から名前付きエクスポートをインポートしますreact-router。つまり、次のようなものです。

export const Link = 42;

---

import Router from 'react-router';
const {Link} = Router;

オブジェクトであると仮定して、デフォルトの exportLinkからプロパティを引き出します。

export default {
  Link: 42
};

(デフォルトのエクスポートは、実際には「デフォルト」という名前の標準化された名前付きエクスポートに他なりません)。

exportMDNも参照してください。

完全な例:

// react-router.js
export const Link = 42;
export default {
  Link: 21,
};


// something.js
import {Link} from './react-router';
import Router from './react-router';
const {Link: Link2} = Router;

console.log(Link); // 42
console.log(Link2); // 21

---

Babel 5 以下では、ES6 モジュールが CommonJS にトランスパイルされた方法により、互換性があると思います。しかし、言語に関する限り、これらは 2 つの異なる構成要素です。

Answer 2

これをする：

import {purple, grey} from 'themeColors';

export constシンボルごとに繰り返さずに、次のようにします。

export const
  purple = '#BADA55',
  grey = '#l0l',
  gray = grey,
  default = 'this line actually causes an error';