reactjs - 故事书 - 使用自定义 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"
  ]
}

npx sb init 自动安装的平均 .stories.js 文件看起来也不错:

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.

根据要求， here是 repo 的链接，因此您可以更深入地了解结构、webback 配置等。注意我还没有提交 npx sb init还没有改变，所以你不会在那里看到文件，只有我在运行 sb init 之前的起点.
我在获取 npx sb init 时没有遇到任何问题使用标准的 create-react-app，但使用我的自定义 webpack 构建和 typescript ，它只是空的。怎么了？
编辑:附加细节
我意识到只是运行 npx sb init ，然后 npm run storybook抛出这个错误:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'

基于 this thread , 安装 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帮助您转换 typescript 代码。