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