ES6 Destructuring và Module nhập khẩu

Question

Tôi đã theo ấn tượng rằng cú pháp này:

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

có kết quả cuối cùng giống như thế này:

import {Link} from 'react-router'; 

Ai đó có thể giải thích những gì là sự khác biệt?

(Tôi ban đầu nghĩ đó là một React Router Bug.)

Answer 1

import {Link} from 'react-router'; 

nhập khẩu một tên xuất khẩu từ react-router, tức là một cái gì đó giống như

export const Link = 42; 

---

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

kéo ra tài sản Link từ số xuất mặc định, giả sử nó là một đối tượng, ví dụ:

export default { 
    Link: 42 
}; 

(xuất mặc định thực sự không là gì ngoài xuất khẩu được đặt tên chuẩn với tên "mặc định").

Xem thêm export on MDN.

Hoàn dụ:

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

---

Với Babel 5 và dưới đây tôi tin rằng họ đã được hoán đổi cho nhau vì cách module ES6 đã được transpiled để CommonJS. Nhưng đó là hai cấu trúc khác nhau theo ngôn ngữ.

Answer 2

Để làm điều này:

import {purple, grey} from 'themeColors'; 

Không lặp lại export const cho mỗi biểu tượng, chỉ cần làm:

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