SvelteKit 的 Storybook

Svelte 正在迅速成为前端生态系统中的主要框架，为 Web 开发者提供了许多出色的功能。借助 SvelteKit，它还为应用程序提供了强大的元框架。在 Storybook，我们正在投资 Svelte 生态系统，为 Svelte 和 Storybook 用户创造无缝且愉悦的体验。

我很高兴宣布 SvelteKit 框架的 Storybook。它由 Storybook 全新的 Framework API 提供支持，这使得 Storybook 和 Web 框架之间的集成更简单、性能更高。

手动组合 Svelte、Vite 和自定义配置以使 Storybook 表现得像您的 SvelteKit 应用程序的日子已经一去不复返了。@storybook/sveltekit 负责处理所有这些。

但为什么要选择 SvelteKit 呢？

在过去的几年里，Svelte 经历了巨大的增长。最近的 State of JS 调查例证了 Svelte 的受欢迎程度，其总体用户认知度为 94%，稳定保留率为 90%，并且在用户兴趣方面在所有框架中得分最高。无论您如何解释，这些都是令人印象深刻的数字。

我们还看到 Storybook 中对 Svelte 和 SvelteKit 的兴趣日益增长，越来越多的 Svelte 开发者加入了 Storybook Discord，并且来自 Storybook 7.0 beta 的初步数据显示，越来越多的 SvelteKit 用户正在升级。

介绍 SvelteKit 框架

新的 SvelteKit 框架使您能够以“SvelteKit 方式”在 Storybook 中开发组件和页面。项目配置会自动在 Storybook 中使用，并且 SvelteKit 的许多功能都可以开箱即用。

首先，Storybook 7 会自动将根 Vite 配置中的用户配置合并到 Storybook 的 Vite 配置中。这意味着 vite.config.ts 或 svelte.config.ts 中的任何内容都将自动应用于 Storybook。

您仍然可以使用 storybook/main.js 文件中的 viteFinal 来配置所有这些。这允许您将 Storybook 设置与应用程序设置分开自定义。有关更多信息，请参阅文档。

在 Storybook 中使用 SvelteKit 功能

@storybook/sveltekit 的第一个版本还增加了对 SvelteKit 应用程序中最常用的一些功能的支持

• 支持使用特殊 $lib 别名的导入
• 组件可以从 $app/environment 读取当前环境信息
• 支持 $app/paths，因此您可以安全地获取资源路径
• $app/stores 中的 Store 开箱即用

我们首先关注这组功能，因为它们是大多数 SvelteKit 应用程序的基础。我们将继续致力于此，并计划开发超越基础的功能，使 Storybook 和 SvelteKit 更加紧密地结合在一起。

用于 Storybook 的 SvelteKit 框架是与 Svelte 核心维护者（特别是 Ben McCann）紧密合作构建的，旨在带来尽可能无缝的体验。集成需要在 Storybook 和 SvelteKit 两侧进行更改。事实上，上面列出的大多数功能只有通过更改 SvelteKit 代码库才有可能实现——这些更改有益于与 SvelteKit 集成的整个工具生态系统。

开始使用

@storybook/sveltekit 框架支持 Storybook 7（目前处于 beta 阶段）和 SvelteKit 1.0。

入门很简单。查看完整文档。

新项目

在您的 SvelteKit 项目的根目录中运行以下命令，并按照提示操作

npx storybook init

Storybook 将自动检测您的 SvelteKit 项目并安装必要的软件包和配置。

现有项目

如果您已经在项目中使用版本 7 之前的 Storybook，请使用以下命令升级 Storybook，并按照提示操作

npx storybook upgrade

如果您的现有项目配置了 Vite 构建器，它将提示您自动将 Storybook 配置和依赖项迁移到新的 @storybook/sveltekit 包。

如果您的现有 Storybook 设置正在使用 Webpack 构建器，则无法自动为您迁移，因为无法将您的 Webpack 配置迁移到 Vite 配置。在这种情况下，请按照手动迁移步骤进行操作。

这仅仅是个开始

@storybook/sveltekit 使在 SvelteKit 项目中开始使用 Storybook 比以往任何时候都更容易，但这仅仅是个开始。我们将继续与 Svelte 团队密切合作，以进一步改进 Storybook 中对 Svelte 和 SvelteKit 的支持。

以下是未来展望

特别感谢

如果没有 Ben McCann 的出色工作，SvelteKit 集成是不可能实现的。此外，Ian Van Schooten 在 Vite 构建器方面取得的巨大进展和反馈帮助 SvelteKit 集成成为可能。最后，我们要衷心感谢所有在 alpha 和 beta 阶段测试并报告错误和问题的用户。没有你们，集成不会如此出色。