如何配置Storybook同时读取多个前端项目的stories目录

解决方案 #

Storybook 的 stories 配置项原生支持传入多组 glob 匹配规则，无需手动注释切换，直接把所有需要加载的路径都写入数组即可，框架会自动遍历所有匹配文件加载对应的 stories。

基础可用配置

直接取消你当前配置中路径的注释即可正常使用：

module.exports = {
  stories: [
    // --- GPF components ---
    "../../../apps/frontend/src/components/stories/**/*.stories.mdx",
    "../../../apps/frontend/src/components/stories/**/*.stories.@(js|jsx|ts|tsx)",
    // --- UTR components ---
    "../../../apps/utr-frontend/components/stories/**/*.stories.mdx",
    "../../../apps/utr-frontend/components/stories/**/*.stories.@(js|jsx|ts|tsx)",
    // --- Global components ---
    "../../components/stories/**/*.stories.mdx",
    "../../components/stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

简化可扩展配置

如果后续需要新增更多 stories 目录，可以抽离公共前缀动态生成匹配规则，避免重复写后缀规则：

// 统一维护所有包含stories的目录前缀（路径为相对于.storybook目录的相对路径）
const storyBaseDirs = [
  "../../../apps/frontend/src/components/stories",
  "../../../apps/utr-frontend/components/stories",
  "../../components/stories"
];

// 批量生成完整的匹配规则
const stories = storyBaseDirs.flatMap(baseDir => [
  `${baseDir}/**/*.stories.mdx`,
  `${baseDir}/**/*.stories.@(js|jsx|ts|tsx)`
]);

module.exports = {
  stories,
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

如果启动后有文件加载失败的情况，仅需要核对配置的路径是否为相对于 .storybook 目录的正确相对路径即可。

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