如何扩散到出口

Question

我有一个javascript文件，可以在其中简单地定义css类，以便可以在我的代码中使用它们并可以将它们维护在一个位置，如下所示：//css.jsconst 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 definitionsexport 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 = 1const two = 2export { one, two, }但这不是const one = 1const two = 2 const numbers = { one, two, }export { ...numbers, }

Answer 1

1. 除非我缺少任何东西，否则您无需扩展all到新对象即可使它工作，export all

2. 听起来您真正想要的只是普通的命名出口。无需将所有内容组合到一个对象中，您只需说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]将其评估为已初始化的变量。