Storybook

Question

我正在尝试在项目中设置 Storybook。我的项目是运行ing on 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 是回购协议的 link，因此您可以更深入地了解结构、网络配置等。请注意，我不是提交了 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 解决了问题和故事书运行s，尽管没有故事。

Answer 1

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

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

Answer 2

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

您可能需要先删除它，然后它才能正常工作：

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

如果你想为故事书有一个特殊的 babel 配置，把它放在 .storybook/.babelrc 这样配置就很简单了：

.storybook/.babelrc:

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

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

Answer 3

如果要在 sb 中处理 arcgis-js-api，您必须通过添加到故事书的配置中来声明 @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 4

像tmhao2005说的。 Storybook 仍然使用你的 babel 配置。这是预期的行为。 This thread at github 还描述了如何修复类似的问题。

更新了您的配置 .storybook/main.js。

如果你使用.babelrc:

babel: async options => ({ ...options, babelrc: false })

或.babel.config.js:

babel: async options => ({ ...options, configFile: false })

Storybook - 在带有自定义 webpack / babel 的打字稿项目中没有出现任何故事

Storybook - no stories showing up in typescript project with custom webpack / babel

typescript

reactjs

webpack

编辑：更多细节