如何扩散到出口

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

编辑：

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

//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-export使用此对象的东西：const all = {};for (const p in myself)    if (p != "default")        Object.assign(all, myself[p]);export { all as default };确保将此代码放在模块的末尾，以便myself[p]将其评估为已初始化的变量。