ES6 Destructuring and Module imports
To do this:
import {purple, grey} from 'themeColors';
Without repeating export const
for each symbol, just do:
export const
purple = '#BADA55',
grey = '#l0l',
gray = grey,
default = 'this line actually causes an error';
import {Link} from 'react-router';
imports a named export from react-router
, i.e. something like
export const Link = 42;
import Router from 'react-router';
const {Link} = Router;
pulls out the property Link
from the default export, assuming it is an object, e.g.
export default {
Link: 42
};
(the default export is actually nothing but a standardized named export with the name "default").
See also export
on MDN.
Complete example:
// 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
With Babel 5 and below I believe they have been interchangeable because of the way ES6 modules have been transpiled to CommonJS. But those are two different constructs as far as the language goes.