CommonJS Importe vs ES6 Importe

Question

Hier sind zwei Beispiele für die Verwendung eines nicht standardmäßigen Exports. Der erste verwendet commonjs Syntax und der zweite es6. Warum funktioniert das erste Beispiel, aber nicht das zweite?

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


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

Ich verstehe, dass ich import { Link } from 'react-router' stattdessen verwenden kann, aber ich versuche, meinen Kopf herum zu wickeln, wie jeder Import unterscheidet.

Answer 1

import ReactRouter importiert nur den Standard-Export. Es importiert kein Objekt namens benannte Exporte, was Sie in Ihrem ES6-Code erreichen möchten. Wenn im Modul kein Standardexport vorhanden ist, lautet dieser undefined.

Wie bereits erwähnt, ist die dedizierte Syntax für den Import eines einzigen namens Export.

Wenn Sie alle namens Exporte in ein Objekt importieren möchten, können Sie die import..as Syntax:

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

MDN hat eine super-hilfreich Liste aller verschiedenen Arten von Importen und wie sie funktionieren .