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}语法。有什么方法可以完成我想要的工作，还是我必须像现在这样写两次所有东西？

编辑：

如果在声明时将变量设置为export，则重新使用变量会使我措手不及。现在这是我的代码：

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

除非我缺少任何东西，否则您无需将all传播到一个新对象中就可以使它起作用，只需export all
听起来您真正想要的只是普通的命名出口。不必将所有内容组合到一个对象中，只需说export const buttoncss = ...，然后完全跳过所有这些内容

Answer 2

即使命名为export的速记语法看起来与速记对象文字语法非常相似，导出也不是对象。因此，没有，实际上没有办法在其中使用扩展语法，这也意味着动态导出名称。

有什么办法可以实现我想要的吗？

为所有样式使用命名导出后，可以将自己的模块作为名称空间导入：

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]会求值到已初始化的变量。

如何传播到出口

2 个答案: