ES6 Destrukturierung und Modulimporte

Question

Ich hatte den Eindruck, dass diese Syntax:

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

das gleiche Endergebnis wie diese hat:

import {Link} from 'react-router'; 

Kann jemand erklären, was der Unterschied ist?

(Ursprünglich dachte ich, es war ein React Router Bug.)

Answer 1

import {Link} from 'react-router'; 

die Eigenschaft ein namens Export von react-router, also so etwas wie

export const Link = 42; 

---

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

zieht importiert Link von der Standardexport, unter der Annahme, dass es sich um ein Objekt handelt, z.B.

(der Standard-Export ist eigentlich nichts anderes als ein standardisierter benannter Export mit dem Namen "default").

Siehe auch export on MDN.

Komplettes Beispiel:

// 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 

---

Mit Babel 5 und unten Ich glaube, sie wegen der Art und Weise ES6 Module transpiled bis Commonjs wurden austauschbar waren. Aber das sind zwei verschiedene Konstrukte, soweit es die Sprache betrifft.

Answer 2

dies zu tun:

import {purple, grey} from 'themeColors'; 

Ohne export const für jedes Symbol zu wiederholen, nur tun:

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