StorybookJS是否支持以数组形式批量导出stories而非命名导出？

要实现无需手动维护命名导出、动态从函数获取并导出stories的需求，你可以按以下步骤操作：

1. 调整getStoriesForTemplate的返回结构 #

把原本返回数组的逻辑改成返回键值对对象，其中键是Storybook需要的命名导出名称（如Basic、Another），值是对应的Template.bind({})实例。示例：

// getStoriesForTemplate.js
export function getStoriesForTemplate(Template) {
  const stories = {};
  // 动态生成story逻辑示例：
  stories.Basic = Template.bind({});
  stories.Basic.args = { /* Basic对应的参数配置 */ };

  stories.Another = Template.bind({});
  stories.Another.args = { /* Another对应的参数配置 */ };

  // 后续新增或修改story只需在此处调整，无需改动导出文件
  return stories;
}

2. 在stories文件中动态导出所有story #

由于ES模块的导出是静态结构，无法直接导出未知名称的变量，因此可以用CommonJS的方式实现动态导出（Storybook完全兼容CommonJS）：

import { getStoriesForTemplate } from './path/to/getStoriesForTemplate';
import Template from './your-component-template';

const dynamicStories = getStoriesForTemplate(Template);

// 遍历对象，将每个story名称和实例作为命名导出
for (const [storyName, storyInstance] of Object.entries(dynamicStories)) {
  exports[storyName] = storyInstance;
}

这样一来，后续getStoriesForTemplate中新增或修改story时，当前stories文件完全不需要任何改动，所有命名导出会自动同步到Storybook中。

内容的提问来源于stack exchange，提问作者rwacarter