Storybook 中一流的 Vite 支持

Vite 是一款席卷网络开发世界的下一代构建工具。它带来了快速启动、即时热重载、广泛兼容性和轻松配置。凭借在 GitHub 上接近 5 万颗星，每周近 200 万次的 npm 下载量，以及 650 多名贡献者，Vite 显然“非同小可”。

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

在过去的一年里，我们重新设计了 Storybook 的架构，以实现一流的 Vite 支持。在 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 的路线图

Storybook for Vite 已经在数百个生产应用中使用。事实上，Storybook 的 Vite builder 每周有近 20 万次下载，是 Vite 本身下载量的十分之一。即将到来的 7.0 版本将为所有这些用户带来巨大的使用体验提升。 

我们已将 Vite builder 移至 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 上提出问题或讨论，并@我 (@IanVS)。 最后，在 Twitter 上关注 @storybookjs 和 @ianvanschooten，获取所有最新的 Storybook 新闻和公告。