NextJS、SvelteKit、Remix 和 Storybook 的未来

Storybook 是构建 UI 组件和页面的行业标准工作台。每天有成千上万的团队使用它。但这种普及也意味着我们需要支持 JavaScript 生态系统中大量的库。这很棘手。

最初，Storybook 与 React 集成，然后扩展到 Vue、Angular、Web Components、Svelte 和其他十几个渲染器。随着社区的壮大，又出现了 500 多个集成和插件。

我们的目标是帮助您将您喜爱的工具与 Storybook 一起使用。这就是为什么我很高兴分享 Framework API，这是一个新的架构，它可以简化集成、提高性能、减少安装大小，并且对于许多流行的应用程序设置来说是零配置的。这为即将到来的 7.0+ 版本解锁了对更多工具的零配置支持

• ⚡️ Vite
• ▲ NextJS
• 🦾 SvelteKit
• 💿 Remix（2023 年考虑中）
• 🏔 Nuxt（2023 年考虑中）

Storybook 如何与应用程序协同工作

Storybook 在隔离环境中构建、记录和测试您的 UI 组件。它存在于您的应用程序之外，但通过模拟上下文、状态和变量，尽可能地模仿环境。

如果组件在 Storybook 中渲染或行为不同——或者更糟糕的是，崩溃了——那么它就失去了隔离它的目的。

Storybook 的灵活配置允许您模拟即使是最复杂的基于 Webpack 和 Vite 的环境。但是手动设置非常痛苦，特别是如果您正在使用像 NextJS 这样的现成的“元框架”，其中底层配置对您来说可能是不可见的。

术语回顾

在我们开始之前，让我们了解一下 Storybook 如何称呼事物。

构建器 将 Javascript、CSS 和 MDX 编译成可执行的捆绑包并更新浏览器。例如：Webpack、Vite

渲染器 负责将您的组件和故事放到屏幕上。它们还提供 TypeScript 类型，以帮助您更快、更正确地编写故事。例如：React、Vue、Angular

框架 将构建器、渲染器和您的应用程序设置组合成一个方便共享的包。例如：vue-vite、nextjs

Framework API

进入即将到来的 7.0 版本的 Framework API。“框架”是自动配置 Storybook 以与流行的应用程序设置配合使用的软件包。它们由 Storybook 维护或由我们的社区贡献。

框架如何工作

1. 读取您的应用程序设置
2. 配置 Storybook 以模仿您的应用程序的构建和渲染设置
3. 模拟其他方便的应用程序功能，如路由或数据获取（可选）

通过在您的 .storybook/main.js 中添加一行来使用框架

// .storybook/main.js

export default {
  /* stories: [ ... ], addons: [ ... ], etc. */
  framework: '@storybook/nextjs',
}

上述操作将设置 Storybook 以与 NextJS 及其 Webpack 和 Babel 依赖项一起工作。无需额外的配置或样板代码。

可扩展，面向高级用户

如果您有完全自定义的设置，Storybook 仍然像以前一样可配置。从像 react-webpack5 或 react-vite 这样的基础框架开始，并扩展基础配置以匹配您的应用程序。

扩展配置在文档中进行了描述。例如，要添加 Sass 支持，您可以扩展框架提供的现有配置

// .storyook/main.js

export default {
  /* stories: [ ... ], addons: [ ... ], etc. */
  framework: '@storybook/react-webpack5',
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
}

对于最终用户，您将获得高度保真的 Storybook 体验，开箱即用地模拟您的应用程序配置。

对于库维护者来说，与 Framework API 集成是一种简单的方式，可以让您的用户充分利用 Storybook 的强大功能，同时减少他们的工作量（并减少您的 GitHub 问题）。

路线图 - 我们接下来支持什么

⚡ Vite 框架

Vite 是一个闪电般快速的 构建工具，它席卷了前端开发世界。为了提供最佳的 Vite 体验，我们创建了 Storybook 框架：react-vite、vue3-vite、vue-vite、preact-vite、svelte-vite、html-vite 和 web-components-vite，它们对应于 Vite CLI 生成的项目类型。

每个框架都镜像您的应用程序的 Vite 配置，因此无需进一步配置。更重要的是，Vite 流行的包管理器 pnpm 也开箱即用。从 7.0 开始，Webpack 不再是 Vite 用户的依赖项。有关 Vite 框架的完整描述，请参阅我们关于一流 Vite 支持的公告。

▲ NextJS 零配置框架

NextJS 已经有多个 社区 插件。NextJS 框架的灵感来自于所有社区的工作，并为 v13 进行了更新。 它允许 Storybook 镜像您的 Webpack、Babel 和 Turbopack（稳定后）的构建设置。该框架还模拟了 next/image、next/router 和其他常见的 NextJS 模式。

🦾 SvelteKit 框架

SvelteKit 是 Svelte 推荐的构建 Web 应用程序的方式。它开箱即用地提供了路由、数据加载和资源处理。SvelteKit 框架是与 SvelteKit 维护者 Ben McCann 合作开发的，将在 7.0 版本中推出。它允许 Storybook 镜像您的 SvelteKit 设置。

💿 Remix 框架（考虑中）

Remix 是一个基于 React Router 的高性能全栈 Web 框架。框架支持正在与创建者 Ryan Florence 讨论，并且“计划”在 Remix 公开路线图上。

🏔 NuxtJS 框架（考虑中）

Vue 应用程序框架 Nuxt 是最早提供与 `@nuxtjs/storybook` 专用集成的框架之一。Framework API 为未来的迭代提供了更好的抽象。

但是如何维护所有这些呢？

随着集成的增加，维护也变得更加重要。在过去的 4 个月中，Storybook 团队构建了一个自动化测试套件，能够对每个框架、渲染器（例如 Vue）加构建器（例如 Vite）、Storybook 版本和功能的组合进行质量保证。

该测试套件已经在生产环境中运行：核心测试在每个 PR 上运行，完整套件每晚运行。作为 Storybook 用户，您将确信 Storybook 可以与您的技术栈一起使用。并且它将继续工作。我们将在以后的文章中分解测试套件的运行方式。

创建您自己的框架

您是否维护一个前端库？为您的用户创建无缝的 Storybook 体验，方法是为您的项目创建一个框架。我们可以帮助您入门、排除故障，并在您的框架准备就绪时向社区推广。

首先安装 Storybook 7 以试用 Framework API

npx storybook upgrade

然后查看以下资源

• 创建框架的文档
• 在 Discord 上获得维护者的帮助

参与进来

前端生态系统是多样化且不断变化的。我们相信每个前端开发人员都应该能够利用 Storybook，这就是为什么我们专注于兼容性。Framework API 简化了 Storybook 与流行的应用程序设置一起使用的方式。

我们很乐意听到您对 Framework API 的反馈。如需提前体验，请安装最新的 7.0 alpha 版本。在 GitHub 上加入我们，或在 Discord 上与我们聊天。最后，在 Twitter 上关注 @storybookjs 以获取最新消息。