web-dev-qa-db-ja.com

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

私はこの構文の印象を受けました：

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

これと同じ最終結果があります：

import {Link} from 'react-router';

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

（元々は React Router Bug であると思っていました。）

javascriptecmascript-6destructuringes6-modules
50
Guy
import {Link} from 'react-router';

named export という名前のreact-routerからインポートします。

export const Link = 42;

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

オブジェクトであると仮定して、プロパティLinkを default export から引き出します。

export default {
  Link: 42
};

（デフォルトのエクスポートは、実際には「default」という名前の標準化された名前付きエクスポートにすぎません）。

export on MDN も参照してください。

完全な例：

// 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つの異なる構成要素です。

76
Felix Kling

これをする：

import {purple, grey} from 'themeColors';

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

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