Storybook对Vite的一流支持

Vite 是一个下一代构建工具，它已席卷 Web 开发界。它为您提供快速启动、即时重载、广泛的兼容性和易于配置。拥有近 50,000 个 GitHub star，每周近 200 万次 npm 下载，以及 650 多名贡献者，Vite 显然是一个“大腕”。

Storybook 在 2021 年 4 月（Vite 2.0 发布两个月后）就获得了对 Vite 的首次支持，这得益于社区成员 Eirik Sletteberg 的帮助。这个实验性的 Vite 适配器得到了快速的采纳。

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

• 🏎️ 预打包以提高性能
• 🙅 无需 Webpack，安装体积更小
• 🪄 无需配置
• 🌐 Vue 2 + 3、Svelte、React 等

预构建以提高性能

Storybook 7.0 以预构建应用程序的形式发布，以加快启动和构建时间。Storybook 分为两个部分：一个 iframe，用于隔离渲染您的组件；以及 Storybook 自己的应用程序，用于导航 stories 和插件。

以前，运行 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 的路线图

Storybook for Vite 已在数百个生产应用程序中使用。事实上，Storybook 的 Vite 构建器每周的下载量接近 200,000 次，这相当于 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 或 discussion 并标记我（@IanVS）。 最后，请在 Twitter 上关注 @storybookjs 和 @ianvanschooten 以获取所有最新的 Storybook 新闻和公告。