Storybook - 使用自定义 webpack / babel 的 typescript 项目中没有故事出现

Question

我正在尝试在项目中设置 Storybook。我的项目在 React@^16 上运行，我使用 TypeScript，并使用自定义 babel 和 webpack 设置进行开发和构建。为了设置故事书，我做了

npx sb init

这将安装所需的一切。它将一个.storybook文件夹放在根文件夹中，并stories在我的src文件夹中放入一个文件夹，其中包含一些预制组件和故事的tsx格式（这就是我想要的）：

该.storybook/main.js文件看起来不错：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

自动安装的平均 .stories.js 文件npx sb init似乎也很好：

import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { Header, HeaderProps } from './Header';

export default {
  title: 'Example/Header',
  component: Header,
} as Meta;

const Template: Story<HeaderProps> = (args) => <Header {...args} />;

export const LoggedIn = Template.bind({});
LoggedIn.args = {
  user: {},
};

export const LoggedOut = Template.bind({});
LoggedOut.args = {};

但是当我运行时npm run storybook，故事书登陆页面没有故事。尽管它已经安装了一些默认的故事来开始玩。它说：

Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

根据要求，这里有一个指向存储库的链接，以便您可以更深入地了解结构、webback 配置等。请注意，我尚未提交更改，npx sb init因此您不会在那里看到文件，只有我的起点在运行之前sb init。

npx sb init我在使用标准 create-react-app 时没有遇到任何问题，但使用我的自定义 webpack 构建和打字稿时，它只是空的。出了什么问题？

编辑：附加细节

我意识到只是运行npx sb init，然后npm run storybook抛出此错误：

Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

基于此线程，安装core-js@3解决了问题，并且故事书运行，尽管没有故事。

Answer 1

似乎 babel 插件transform-es2015-modules-amd不适合，storybook因为sb仍然使用你的 babel 配置。

您可能需要将其删除然后它才能工作：

{
  "plugins": [
     // "transform-es2015-modules-amd", // Remove this plugin
   ]
}

如果你想为 Storybook 有一个特殊的 babel 配置，请将其放置.storybook/.babelrc，这样配置就会很简单，如下所示：

.storybook/.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

注意：您可能会忘记安装@babel/preset-typescript来帮助您转换打字稿代码。