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; 

вытаскивает недвижимость Link от экспорт по умолчанию, предполагая, что это объект, например.

export default { 
    Link: 42 
}; 

(по умолчанию экспорт фактически не является стандартным именованным экспортом с именем «по умолчанию»).

См. Также 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 

---

С Вавилонской 5 и ниже, я считаю, что они были взаимозаменяемы из-за способа ES6 модули были transpiled к CommonJS. Но это две разные конструкции в том, что касается языка.

Answer 2

Для этого:

import {purple, grey} from 'themeColors'; 

Не повторяя export const для каждого символа, просто сделать:

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