Подтвердить что ты не робот

Иммутация ES6 и импорт модулей

У меня создалось впечатление, что этот синтаксис:

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

имеет тот же конечный результат, что и:

import {Link} from 'react-router';

Может кто-нибудь объяснить, в чем разница?

(Первоначально я думал, что это React Router Bug.)

Ответ 1

import {Link} from 'react-router';

импортирует с именем export из react-router, то есть что-то вроде

export const Link = 42;

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

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

export default {
  Link: 42
};

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

См. также export в 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

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

Ответ 2

Для этого:

import {purple, grey} from 'themeColors';

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

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