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

Question

我正在尝试在项目中设置 Storybook。我的项目在 react@^16 上运行，我使用的是 typescript，带有用于开发和构建的自定义 babel 和 webpack 设置。为了设置故事书，我做了

npx sb init

这会安装所有需要的东西。它在根文件夹中放置了一个.storybook 文件夹，在我的src 文件夹中放置了一个stories 文件夹，其中包含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 的链接，因此您可以更深入地了解结构、weback 配置等。注意我尚未提交了 npx sb init 更改，所以你不会在那里看到文件，只有我在运行 sb init 之前的起点。

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

编辑：附加细节

我意识到只是运行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 来帮助您转换您的打字稿代码。

Answer 2

如果要在sb 中处理arcgis-js-api，您必须在storybook 的webpack 配置中通过添加到其配置中来声明@arcgis/webpack-plugin。

您必须执行以下几个步骤：

• 在.storybook/main.js 中添加webpackFinal 属性，内容如下：

const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = {
    // ...
    webpackFinal: (config) => {
        // Add your plugin
        config.plugins.push(
            new ArcGISPlugin(),
        );
        
        // Since this package has used some node's API so you might have to stop using it as client side
        config.node = {
            ...config.node,
            process: false,
            fs: "empty"
        };

        return config;
    }
};

• 还有一点需要注意，一些组件正在导入scss 文件，因此您可能需要通过添加scss 插件'@storybook/preset-scss' 来支持它

// Install
npm i -D  @storybook/preset-scss css-loader sass-loader style-loader


// Add to your current addons
{
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
}

Answer 3

也许你的故事路径有问题，试着在你的配置中只保存“../src/**/*.stories.js”看看是不是原因

  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ]