参加直播会话:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA 问答
文档构建器
Storybook Docs

构建器

Storybook 的核心由 Webpack 和 Vite 等构建器驱动。这些构建器会启动开发环境,将你的代码(Javascript、CSS 和 MDX)编译成可执行的 bundle,并实时更新浏览器。

Storybook builder overview

CLI 基础知识

在深入设置 Storybook 的构建器之前,我们先来看看 CLI 如何配置它们。当你初始化 Storybook(通过 npx storybook@latest init)时,CLI 会根据你的应用自动检测使用哪个构建器。例如,如果你使用 Vite,它会安装 Vite 构建器。如果你使用 Webpack,它默认会安装 Webpack 5 构建器。

此外,你还可以向 Storybook 的 CLI 提供一个标志来指定你想要使用的构建器

npx storybook@latest init --builder <webpack5 | vite>

手动设置

如果你没有指定,Storybook 默认使用 Webpack 5 构建器。如果你想在应用中使用不同的构建器,这些文档详细介绍了如何设置 Storybook 支持的构建器。

  • Vite 构建器,使用 Vite 捆绑你的 stories,并提供近乎即时的 HMR。
  • Webpack,使用 Webpack 捆绑你的 stories,并提升性能
  • Rspack / Rsbuild,使用极快的 Rspack 和 Rsbuild 捆绑你的 stories。