@shilman ,我相信你和团队正忙于处理事情。只是想知道这个问题在解决bug列表中是否有优先级/时间表？

你正在从哪个版本升级？我们通常不会优先处理storysource的bug(并在寻找维护者),但source-loader目前用于addon-docs,因此这方面可以优先考虑。

@shilman 我们从v5升级到了v6。我附上了链接，指向源代码中重现问题的代码。
分析问题后发现，似乎是在source-loader和addon-storysource之间出现的问题。如果你能优先处理它，那就太好了。

在这里也遇到了类似的问题。我们试图采用storysource,但是我们的一些组件需要嵌套许多子组件。例如：Table,它需要head、body、rows、cells和其他相关组件深度嵌套在其中。
这导致每个命名导出都成为一个长组件。在一个文件中有多个这样的组件正是我们试图避免的。所以我们将它们分解成story文件夹中的多个文件。

文件夹结构：

• .storybook/
• main.js
• src/
• simple.stories.tsx(这个可以工作-既有默认导出，也有命名导出)
• complex.stories/
• index.ts
• example-a.tsx

// .storybook/main.js

module.exports = {
  // ...
  stories: [
    "../src/stories/**/*.stories.@(ts|tsx)",
    "../src/stories/**/*.stories/index.@(ts|tsx)",
  ],
  // ...
};

// complex.stories/index.ts

import { Meta } from "@storybook/react/types-6-0";
import { Table } from "component-library";

export default {
  title: "Table",
  component: Table,
} as Meta;

export * from "./example-a";
// export * from "./example-b";
// export * from "./example-c";

// complex.stories/example-a.tsx

import * as React from "react";
import { Story } from "@storybook/react/types-6-0";
import {
  Table,
  // ...
} from "component-library";

export const ExampleA: Story = () => (
  <Table>
    {/* Complex table example */}
  </Table>
);

对于simple.stories.tsx,我们在标签页中得到了预期的源代码。但对于complex.stories/example-a.tsx,标签页是空白的。

你是否有修复的计划时间表/路线图？
谢谢

不，我们正在处理基本插件的积压问题，这是我们现在的优先事项。我很高兴审查带有修复的PR。

经过仔细研究src代码并进行多次尝试，我找到了一个临时的解决方案来解决^6.3.7的问题(尚未测试其他版本)。我的设置与上面定义的设置略有不同，但考虑到以下示例设置和步骤，我认为我们可以解决任何设置。

.storybook/
├── main.js
├── preview.js
└── stories
    ├── complex_story.tsx
    └── my_stories.stories.tsx

需要更改的内容

将所有复杂的故事重命名为 *.story.tsx

在这里使用的实际上是一个自定义的webpack加载器...
storybook/addons/docs/src/frameworks/common/preset.ts
第54行至第63行在 337fdcd 中
| | constsourceLoader=sourceLoaderOptions |
| | ? [ |
| | { |
| | test: /.(stories|story).[tj]sx?$/, |
| | loader: require.resolve('@storybook/source-loader'), |
| | options: { ...sourceLoaderOptions,inspectLocalDependencies: true}, |
| | enforce: 'pre', |
| | }, |
| | ] |
| | : []; |
由于上面的 test 路径只包含 *.story.* 或 *.stories.* 文件，我们的 complex_story.tsx 文件将被排除，因此故事源将永远找不到该文件。所以我们现在的设置是这样的...

.storybook/
├── main.js
├── preview.js
└── stories
-   ├── complex_story.tsx
+   ├── complex_story.story.tsx
    └── my_stories.stories.tsx

注意：你也可以另辟蹊径地覆盖默认的webpack规则，并将 test 正则表达式设置为包括你的复杂故事文件，但我觉得这样做更容易。

将你的 story 文件包含在 main.stories 数组中

除非文件包含在 stories 路径中，否则源将不会被发现。因此， complex_story.story.tsx 必须包含。

// main.js
module.exports = {
  stories: [
-   './stories/**/*.stories.ts?(x)",
+   './stories/**/*.(stories|story).ts?(x)",
  ],
  // ...
};

包含 @storybook/addon-docs

出于某种原因，你也必须包含 @storybook/addon-docs ,没有这个插件，source-loader/story-source仍然无法找到要使用的正确导出作为源。这必须包含一些逻辑来连接导出与其原始文件。

// main.js
module.exports = {
  addons: [
    '@storybook/addon-storysource'
+   '@storybook/addon-docs'
  ],
  // ...
};

如果你像我一样不使用文档选项卡，你可以像这样轻松地隐藏它...

// preview.js
export const parameters  = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: true,
    },
  },
};

注意事项

• 你不能从这些 complex_story.story.tsx 文件中使用 export default 否则它们将被视为故事并需要正确的 title 等，并且很可能是重复的故事。
• 这个解决方法只会显示导出值的源代码，而不是从中导出的文件。因此， import 和其他除特定导出之外的内容都将被排除。

结论

我不认为这是一个解决问题的方法，因为它需要非显而易见的实现来修复。此外，先前版本( ^5.x.x )的功能允许完整文件可见，而不仅仅是导出的内容包括。
查看 nickofthyme@d7429cf 以查看工作演示，只需运行 yarn bootstrap --core && yarn start 即可在本地运行。

跟进我注意到在一些故事中存在一个类似于#12208的问题。