CommonJSのインポートとES6のインポート

Question

デフォルト以外のエクスポートを使用する2つの例を次に示します。最初はcommonjs構文を使用し、2番目の構文はes6を使用します。最初の例はなぜ機能しますが、2番目の例は機能しませんか？

// commonjs --- works! 
var ReactRouter = require('react-router') 
var Link = ReactRouter.Link 


// es6 --- doesn't work! 
import ReactRouter from 'react-router' 
var Link = ReactRouter.Link 

私が代わりにimport { Link } from 'react-router'を使用できることを理解し、私はちょうど、各インポートがどのように異なるかのまわりで私の頭をラップしようとしています。

Answer 1

import ReactRouterデフォルトのエクスポートのみをインポートします。 ES6コードで達成しようとしている名前付きエクスポートオブジェクトはインポートされません。モジュールにデフォルトのエクスポートがない場合、はundefinedになります。

前述のとおり、import { Link } from 'react-router'は、という名前の単一のをインポートするための専用構文です。

あなたがオブジェクトに全てという名前の輸出をインポートしたい場合は、あなたがimport..as構文を使用することができます

import * as ReactRouter from 'react-router'; 
var Link = ReactRouter.Link 

MDNは輸入品のすべての異なる種類の超便利リストを持っており、彼らがどのように動作するかを。