NextJS、SvelteKit、Remix 和 Storybook 的未来

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

起初，Storybook 集成了 React，随后扩展到 Vue、Angular、Web Components、Svelte 以及十几种其他渲染器。 随着社区的发展，又出现了 500 多个集成和插件。

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

• ⚡️ Vite
• ▲ NextJS
• 🦾 SvelteKit
• 💿 Remix (考虑在 2023 年支持)
• 🏔 Nuxt (考虑在 2023 年支持)

Storybook 如何与应用协同工作

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

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

Storybook 灵活的配置使您可以模仿最复杂的基于 Webpack 和 Vite 的环境。但是手动设置这些会很痛苦，特别是如果您使用像 NextJS 这样的现成“元框架”，其底层配置对您可能是透明的。

术语回顾

在开始之前，我们先回顾一下 Storybook 中的一些术语。

构建器（Builders）将 Javascript、CSS 和 MDX 编译成可执行的 bundle 并更新浏览器。例如：Webpack、Vite

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

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

框架 API

推出即将登陆 7.0 版本的框架 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 体验。

对于库的维护者来说，集成框架 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 维护者 Ben McCann 合作开发的 SvelteKit 框架将随 7.0 版本一起推出。它允许 Storybook 模仿您的 SvelteKit 设置。

💿 Remix 框架（考虑中）

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

🏔 NuxtJS 框架（考虑中）

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

但如何维护这一切呢？

集成越多，维护工作量越大。在过去的 4 个月中，Storybook 团队构建了一套自动化测试套件，能够对每个框架、渲染器（例如 Vue）与构建器（例如 Vite）的组合、Storybook 版本以及特性进行质量保证。

测试套件已在生产环境中运行：核心测试在每个 PR 上运行，完整套件每晚运行。作为 Storybook 用户，您可以确信 Storybook 与您的技术栈协同工作，并且将持续工作。我们将在未来的文章中详细介绍测试套件的运行方式。

创建您自己的框架

您是前端库的维护者吗？通过为您的项目创建一个框架，为您的用户带来无缝的 Storybook 体验。当您的框架准备就绪时，我们可以帮助您入门、解决问题并向社区推广您的框架。

首先安装 Storybook 7 以尝试框架 API

npx storybook upgrade

然后查看以下资源

• 创建框架的文档
• 在 Discord 上从维护者那里获取帮助

参与进来

前端生态系统是多元化且不断变化的。我们认为每位前端开发者都应该能够利用 Storybook 的优势，这就是为什么我们专注于兼容性。框架 API 简化了 Storybook 与流行应用设置的配合使用方式。

我们很期待您对框架 API 的反馈。如需提前体验，请安装最新的 7.0 alpha 版本。通过 GitHub 加入我们，或在 Discord 上与我们聊天。最后，在 Twitter 上关注 @storybookjs 获取最新消息。