Es6 Разрушение

Question

У меня есть файл, похожий на этот:

const COLORS = {
  PRIMARY_COLOR: 'red',
  SECONDARY_COLOR: 'green'
};

const APP = {
  APP_COLOR: GRAY_DARK,
  APP_FONT_SIZE: FONT_SIZE_NORMAL,
  APP_FONT_WEIGHT: FONT_WEIGHT_NORMAL,
  APP_SEPARATOR_COLOR: GRAY_LIGHT
};

export default {
  ...COLORS,
  ...APP
};

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

import theme, { PRIMARY_COLOR } from '../../../themes/default';

печать объекта темы работает нормально но печать PRIMARY_COLOR становится неопределенной

Любая помощь?

Answer 1

Чтобы понять разницу, сначала нужно узнать, как они экспортируются.

В случае React экспорт идет примерно так

const Component = ...
...
...
export Component;

Это становится доступным под React.Component, и вы можете импортировать его как import { Component } from 'react';

Под микроскопом они выглядят так:

default.Component
...

В то время как все остальное находится под объектом default.

Если вы быстро наберете console.log из theme, вы поймете, что я имею в виду.

Надеюсь, это имеет смысл.

---

Давайте немного углубимся.

Предположим, у вас есть следующий бит кода:

const a = {
    test: 'hello',
};

const b = {
    foo: 'bar',
}

export default a;

Теперь давайте import, что

import * as theme from './test.js'

Когда мы делаем console.log( theme ), мы получаем

{ default: { test: 'hello' } }

Что это показывает? Это означает, что объект export файла содержит свойство default, которое автоматически загружается в память, когда мы делаем что-то вроде import theme from 'test'. Однако, если у вас есть более одного export, компилятор дает вам возможность выбирать, но в то же время предоставляет вам объект default только для отступления.

В вашем случае вы экспортировали все под default. Когда вы делаете import theme from './theme' все работает нормально. Однако когда вы делаете { PRIMARY_COLOR }..., он пытается найти что-то, что было экспортировано, например

export PRIMARY_COLOR...

Надеюсь, это понятно! :)

Answer 2

Синтаксис {} в импорте предназначен для "именованного" импорта и не деструктурируется.

Просто сделайте это:

import theme from '../../../themes/default';

const { PRIMARY_COLOR } = theme;