如何让Storybook自动识别项目中所有位置的.stories文件？

你可以使用一个递归匹配所有目录下.stories文件的通用路径模式，直接替换当前手动添加的多个路径，无需逐个指定目录结构：

module.exports = {
  stories: [
    '../**/*.stories.@(js|jsx|ts|tsx)'
  ],
};

模式说明： #

• ../**/：从main.js所在目录的上级目录（项目根目录）开始，递归匹配所有层级的子目录
• *.stories.@(js|jsx|ts|tsx)：精准匹配所有以.stories.js/.stories.jsx/.stories.ts/.stories.tsx结尾的文件

这个配置会自动扫描项目根目录下所有位置的.stories文件，不管文件是在stories、libs还是其他任意子目录中，都会被Storybook识别。

如果担心误匹配到node_modules等不需要的目录文件，可以添加排除规则：

module.exports = {
  stories: [
    '../**/*.stories.@(js|jsx|ts|tsx)'
  ],
  excludeStories: [
    '../node_modules/**/*'
  ]
};

这样就能确保只扫描项目自身的.stories文件，不会包含第三方依赖中的内容。

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