Question

我正在尝试在一个项目中设置Storybook。我的项目在react @ ^ 16上运行，我正在使用打字稿，并使用自定义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是回购的链接，因此您可以更深入地了解结构，weback配置等。请注意，我未提交了{{1} }进行了更改，因此您看不到那里的文件，只有在运行npx sb init之前的我的起点。

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

编辑：其他详细信息

我意识到仅运行npx sb init，然后npx sb init就会引发此错误：

npm run storybook

基于this thread，安装ERROR in ./.storybook/preview.js-generated-config-entry.js Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'解决了问题，并且故事书可以运行，尽管没有故事。

Answer 1

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 2

如果要处理arcgis-js-api中的sb，则必须通过添加到故事书的webpack配置中来声明@arcgis/webpack-plugin。

您需要执行以下几个步骤：

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

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)"
  ]

故事书-使用自定义webpack / babel

编辑：其他详细信息

3 个答案: