Storybook 迁移到 Rspack#

如果你正在使用 Storybook 7.0 的 React 框架并且使用 Webpack5 构建，那么可以实验性地使用 Rspack 替换 Webpack5 构建。

更新依赖#

首先，我们需要添加 storybook-react-rspack 依赖并且可以去掉 webpack 的依赖。

{
  "dependencies": {
-   "@storybook/react-webpack5": "^7"
+   "storybook-react-rspack": "latest"
  }
}

配置 Storybook#

参考下列配置，修改 Storybook 的 main.js 配置：

export default {
-  framework: '@storybook/react-webpack5'
+  framework: 'storybook-react-rspack'
}

示例#

这里有一个 storybook 的示例 react-storybook

局限#

对 Storybook 7.0 的支持仍然是实验性的，并且目前有一些局限

1. 暂不支持 React 以外的框架
2. 暂不支持 NextJS，NextJS 有自己的构建方案

对于 React 自动生成组件文档，现在可以使用如下配置：

export default {
  typescript: {
    reactDocgen: 'react-docgen',
  },
};

Rspack 会使用 react-docgen 来分析文件并且为你的 jsx | tsx 文件生成文档，但该库目前仍然处于开发中，有一些已知问题