建構器

Storybook 的核心是由 Webpack 和 Vite 等建構器驅動。這些建構器會啟動開發環境，將您的程式碼（Javascript、CSS 和 MDX）編譯為可執行檔，並即時更新瀏覽器。

Storybook builder overview

CLI 基礎

在深入了解 Storybook 建構器的設定之前，讓我們先看看 CLI 如何設定它們。當您初始化 Storybook（透過 npx storybook@latest init）時，CLI 會根據您的應用程式自動偵測要使用的建構器。例如，如果您正在使用 Vite，它將會安裝 Vite 建構器。如果您正在使用 Webpack，它預設會安裝 Webpack 5 建構器。

此外，您也可以向 Storybook 的 CLI 提供一個 flag，並指定您想要使用的建構器

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

手動設定

如果您沒有指定建構器，Storybook 預設會使用 Webpack 5 建構器。如果您想在您的應用程式中使用不同的建構器，這些文件會詳細說明如何設定 Storybook 支援的建構器。

Vite 建構器，用於透過 Vite 打包您的 stories，並具有近乎即時的 HMR。
Webpack，用於透過 Webpack 打包您的 stories，並具有改善的效能