构建器

Storybook 的核心由 Webpack 和 Vite 等构建器提供支持。这些构建器启动开发环境，将你的代码（Javascript、CSS 和 MDX）编译为可执行包并实时更新浏览器。

¥Storybook, at its core, is powered by builders such as Webpack and Vite. These builders spin up a development environment, compile your code—Javascript, CSS, and MDX—into an executable bundle and update the browser in real-time.

CLI 基础知识

¥CLI basics

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

¥Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via npx storybook@latest init), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default.

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

¥Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:

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

手动设置

¥Manual setup

如果你未指定 Webpack 5 构建器，Storybook 默认使用 Webpack 5 构建器。如果你想在应用中使用不同的构建器，这些文档详细说明了如何设置 Storybook 支持的构建器。

¥Storybook uses the Webpack 5 builder by default if you don't specify one. If you want to use a different builder in your application, these docs detail how you can set up Storybook's supported builders.

• Vite 构建器 用于将你的故事与 Vite 打包在一起，实现近乎即时的 HMR。

  ¥Vite builder for bundling your stories with Vite with near-instant HMR.

• Webpack 用于将你的故事与 Webpack 打包在一起，以提高性能

  ¥Webpack for bundling your stories with Webpack with improved performance