Как распространяться на экспорт

Question

У меня есть файл javascript, в котором я просто определяю классы css, чтобы я мог использовать их в своем коде и хранить их в одном месте, например:

//css.js

const pre = 'grc-';

const backdropcss = {
  backdrop: `${pre}backdrop`,
};
const buttoncss = {
  btn: `${pre}btn`,
  btnSm: `${pre}btn--sm`,
  btnSecondary: `${pre}btn--secondary`,
  btnTertiary: `${pre}btn--tertiary`,
  btnLink: `${pre}btn--link`,
  btnFull: `${pre}btn--full`,
  btnHalf: `${pre}btn--half`,
  btnThird: `${pre}btn--third`,
};

//etc.

Я использую это двумя способами. Для моей библиотеки компонентов мне нравится выделять имена css для таких компонентов:

export {
  buttoncss,
  alertcss,
  checkboxcss,
  formcss,
  radioboxcss,
  drawercss,
  backdropcss,
  rangecss,
};

Так что я могу импортировать только то, что мне нужно.
Но я также хочу экспорт по умолчанию, где все определения объединены. (Примечание: поэтому я не хочу использовать их как cssjs.buttoncss, а как cssjs, в котором все дочерние объекты распространены)

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

const cssjs = {
  ...buttoncss,
  ...alertcss,
  ...checkboxcss,
  ...formcss,
  ...radioboxcss,
  ...drawercss,
  ...backdropcss,
  ...rangecss,
};

export default cssjs;

Теперь, каждый раз, когда я создаю новые компоненты, мне кажется излишним добавлять его дважды в эти объекты. Поэтому я хотел создать объект all:

const all = {
  buttoncss,
  alertcss,
  checkboxcss,
  formcss,
  radioboxcss,
  drawercss,
  backdropcss,
  rangecss,
};

И распространить их в (именованные) экспорт (ы):

export { ...all}

Затем я напишу некоторый код, чтобы перебрать объект all и распределить каждый подобъект в один большой объект (чтобы создать ранее cssjs объект).

Но прежде чем я смог написать последний код, я заметил, что синтаксис export { ...all} не поддерживается. Есть ли способ выполнить то, что я хочу, или я должен написать все дважды, как сейчас?

---

EDIT:

Повторное использование переменных, если вы устанавливаете их как экспорт, когда объявление объявляет меня врасплох. Это мой код сейчас:

//more definitions

export const formcss = {
  formGroup: `${pre}form--group`,
};

export const radioboxcss = {
  radio: `${pre}radio`,
  radioStacked: `${pre}radio--stacked`,
};

export default {
  ...buttoncss,
  ...alertcss,
  ...checkboxcss,
  ...formcss,
  ...radioboxcss,
  ...drawercss,
  ...backdropcss,
  ...rangecss,
};

Это решило мой конкретный вопрос, но все же заставляет меня задуматься, почему невозможно распространить объект в объявлении экспорта, чтобы можно было экспортировать все в объекте, как указано в объекте. Так что для других людей, которые могут прийти сюда через заголовок:

Почему я могу это сделать

const one = 1
const two = 2

export { one, two, }

Но не это

const one = 1
const two = 2 
const numbers = { one, two, }

export { ...numbers, }

Answer 1

Экспорт не является объектом, даже если сокращенный именованный синтаксис экспорта выглядит очень похоже на буквальный синтаксис сокращенного объекта. Так что нет, там действительно нет способа использовать синтаксис распространения, который также подразумевал бы динамический экспорт имен.

Есть ли способ выполнить то, что я хочу?

После использования именованных экспортов для всех ваших индивидуальных стилей вы можете импортировать свой собственный модуль в качестве пространства имен:

import * as myself from './css.js';

Тогда myself будет объектом пространства имен, содержащим все экспортированные имена. Теперь вы можете default -экспортировать что-то, что использует этот объект:

const all = {};
for (const p in myself)
    if (p != "default")
        Object.assign(all, myself[p]);
export { all as default };

Обязательно поместите этот код в конец вашего модуля, чтобы myself[p] оценил уже инициализированную переменную.

Answer 2

1. Если я что-то не упустил, вам не нужно распространять all в новый объект, чтобы заставить это работать, просто export all

2. Похоже, что вы действительно хотите, это просто именованный экспорт.Вместо того, чтобы объединить все в один объект, вы можете просто сказать export const buttoncss = ... и полностью пропустить все это