Storybook 中一流的 Vite 支持

Vite 是一款下一代构建工具，已经在 Web 开发领域掀起了风暴。它为您带来快速启动、即时重新加载、广泛的兼容性和简易的配置。Vite 拥有近 5 万 GitHub 星星、每周近 200 万 npm 下载量以及 650 多位贡献者，显然是一个“大事件”。

Storybook 最早在 2021 年 4 月（Vite 2.0 发布两个月后）在社区成员 Eirik Sletteberg 的帮助下开始支持 Vite。这个实验性的 Vite 适配器迅速被采用。

在过去一年中，我们为一流的 Vite 支持重新架构了 Storybook。在 7.0 版本中，Vite 将成为构建组件代码的两个内置选项之一（另一个是 Webpack 5）。这意味着 Vite 与 Storybook 功能的集成更加紧密，并为针对任何核心更改进行自动化测试打开了大门。让我们来看看亮点

• 🏎️ 预捆绑以提升性能
• 🙅 无需 Webpack 且安装包体积更小
• 🪄 零配置
• 🌐 支持 Vue 2 + 3、Svelte、React 等

预捆绑以提升性能

Storybook 7.0 以预捆绑应用的形式发布，以加快启动和构建时间。Storybook 有两个部分：一个用于隔离渲染组件的 iframe 和 Storybook 自身的应用，用于导航故事和插件。

以前，运行 Storybook 需要按需构建组件代码和 Storybook 应用。这比较慢，因为每个步骤都需要时间。

预捆绑意味着 Storybook 应用以编译后的代码库形式发布，而不是一组您需要自行编译的依赖项。Storybook 每次启动时的工作量更少，因为所有这些工作都已提前完成。在一个新的引导项目中，构建时间缩短了 15 秒以上，并且 Storybook 开发服务器启动速度也快了几秒。

无需 Webpack 且安装包体积更小

预捆绑的另一个好处是，Storybook Vite 用户将不再需要安装或使用 Webpack。过去，Storybook 使用 Webpack 构建其 UI。Storybook 7.0 改为使用 esbuild 预构建应用，esbuild 与 Vite 开发体验的引擎相同。

Vite 用户需要速度和小型、现代的依赖项。Storybook 7.0 支持现代浏览器和 Node.js 版本，这使我们能够删除不必要的内部依赖项。到目前为止，这已经将 Storybook 的安装包体积精简了 28%。

零配置

Storybook 7.0 从您现有的 Vite 配置文件扩展而来。这意味着您不再需要复制配置或手动合并它们以保持配置一致。 

最初，我们预计用户希望在他们的应用 Vite 配置和 Storybook 的 Vite 配置之间有明确的分隔。这可以更好地控制组件的构建方式。但我们的假设不太正确。Vitest 和 Vite 本身等工具向我们表明，开发人员欣赏 *“开箱即用”* 的工具。因此，现在 Storybook 扩展了您现有的配置。

如果您想要更好地控制 Vite 配置，您仍然可以使用 viteFinal 选项调整 Storybook 的配置（尽管大多数项目将不再需要这样做）。

// .storybook/main.js|mjs|ts
 
import { mergeConfig } from 'vite';
 
export default {
 stories: [
   '../stories/**/*.stories.mdx',
   '../stories/**/*.stories.@(js|jsx|ts|tsx)',
 ],
 addons: ['@storybook/addon-essentials', 'storybook-addon-designs'],
 framework: '@storybook/react-vite',
 async viteFinal(config) {
   // Merge custom configuration into the default config
   return mergeConfig(config, {
     // Add storybook-specific dependencies to pre-optimization
     optimizeDeps: {
       include: ['storybook-addon-designs'],
     },
   });
 },
};

说到配置，7.0 配置文件现在可以用 TypeScript 或原生 ESM 编写，而无需任何其他工具。

广泛的生态系统支持

Vite 对许多框架和工具都有广泛的支持，并且 Storybook 7.0 已经过重构，以便更容易支持这些框架。 除了自 6.5 版本以来一直支持的 React、Vue 3、Svelte 等之外，我们还添加了一流的 Vue 2、Lit 和 SvelteKit 支持。

这些都可以在零额外配置的情况下工作，并且它们将在每个 Storybook 版本中进行测试和维护。 

Vite 的路线图

用于 Vite 的 Storybook 已在数百个生产应用中使用。事实上，Storybook 的 Vite 构建器每周收到近 20 万次下载，是 Vite 本身下载量的十分之一。即将发布的 7.0 版本将为所有这些用户带来巨大的生活质量提升。 

我们已将 Vite 构建器移至 Storybook monorepo 中，使其更稳定，并确保它获得 Storybook 贡献者的更多关注。

我们正在努力改进 Storybook 的 pnpm 支持，许多 Vite 项目都在使用 pnpm。我们的目标是使 7.0 版本在 pnpm 项目中无缝工作，而无需任何变通方法或特殊配置。我们已经做了一些改进，请关注 7.0 版本发布说明以了解更多信息。

此外，我们将继续关注性能——使 Storybook 在安装、构建、启动和运行方面尽可能快。另外，期待 Storybook 一流的测试和文档工具的更多改进。

立即试用

Storybook 致力于 Vite 支持，并将继续改进和提升 Vite 用户的体验。Storybook 7.0 目前处于 alpha 后期阶段，并将很快进入 beta 版。 这意味着我们仍然预计会发生一些可能具有破坏性的更改，但上面讨论的大多数功能都已准备好立即试用。 

如果您已经将 Storybook 与 Vite 一起使用，则可以通过运行以下命令升级到 7.0 版本

npx storybook upgrade

CLI 将自动处理许多重大更改，但请务必阅读迁移指南，以了解有关需要进行的其他更改的详细信息。

如果您没有 Storybook 项目，则很容易开始使用

npx storybook init --builder=vite

我们很乐意听取您对试用 Storybook 7.0 和 Vite 的想法和体验！ 如果您想聊天，我会在 Storybook Discord 中的 #vite 频道中关注，或者随时在 GitHub 中打开 issue 或讨论并标记我 (@IanVS)。 最后，在 Twitter 上关注 @storybookjs 和 @ianvanschooten 以获取所有最新的 Storybook 新闻和公告。