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

Posted 2023-02-19

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

【英文标题】：Storybook - no stories showing up in typescript project with custom webpack / babel

【发布时间】：2021-02-23 01:27:48

【问题描述】：

我正在尝试在项目中设置 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 解决了问题，并且故事书运行，尽管没有故事。

【问题讨论】：

您的故事文件实际上是在导出故事吗？只是因为我过去错误地这样做了才问！

他们.stories.js 文件似乎很好......我在问题中添加了一个以进行澄清。这些是npx sb init 引入的默认文件，甚至还没有我自己编写的任何故事文件。我实际上只是一个接一个地做了一个npx sb init 然后npm run storybook，默认设置是显示一个空的故事书。

我认为 npx sb init 需要一个 CRA 项目才能工作，尝试使用 npm run storybook --debug-webpack 调试 webpack 配置以获取有关正在运行的内容的更多详细信息，并将其与 CRA 中使用的进行比较

能否请您分享此 repo 的 GitHub 链接，以便以更好的方式进行调试？

我添加了链接。请注意，repo 没有从sb init 添加的文件，因为在它开始工作之前我不会提交它们。想象一下克隆 repo 并运行 npx sb init，你就会遇到我遇到的问题。

【参考方案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 来帮助您转换您的打字稿代码。

【讨论】：

就是这样。我尝试了两种方式，两种方式都有效。我不确定我为什么需要transform-es2015-modules-amd，因为我的项目仍然没有它。谢谢！您是如何确定这一点的？

Welp，现在我有一个新问题。既然您对此很了解，也许您可​​以提供帮助。尝试从我的组件创建故事时，出现错误：Module not found: Error: Can't resolve 'esri/Basemap' in '/.../GitHub/20-maps/src/components/chapters/protests_us'。为什么故事书不知道在 node_modules 文件夹中查找节点模块？我做了一些搜索，有些人向 webpack 配置推荐了 adding a resolve，但我的配置中已经有了。

我不确定我是否正确，因为node_modules 应该被正确解析。另外，您的webpack 配置与故事书的配置无关（它有自己的配置，但您可以自定义它）。您可以将您的更改推送到 repo 以便我为您检查吗？

推送更改，包括所有故事书文件和所有内容。非常感谢你看这个

我确实再次检查了您的回购。不幸的是，我看不到package.json 中列出的esri 包在哪里。你错过安装了吗？

【参考方案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'],

【讨论】：

哥们，你太棒了。这行得通。非常感谢！

【参考方案3】：

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

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

【讨论】：

我不确定你在这里建议什么。您答案中的 stories 属性与我的问题中的 stories 相同。您是否建议删除addons？我试过了，它给了我关于不知道如何处理 .svgs 的错误。

我提醒您可以尝试更改故事路径，例如检查它是否可以从更简单的路径中获取故事，例如“故事”：[“../src/**/*.stories. js"]