Storybook for SvelteKit

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

我很高兴宣布 Storybook for SvelteKit 框架。它由 Storybook 新的框架 API 提供支持，该 API 使 Storybook 与 Web 框架之间的集成更简单、性能更好。

手动组合 Svelte、Vite 和自定义配置来让 Storybook 行为像您的 SvelteKit 应用程序的日子一去不复返了。@storybook/sveltekit 将负责处理所有这些。

但为什么是 SvelteKit？

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

我们也看到 Storybook 中对 Svelte 和 SvelteKit 的兴趣日益增长，越来越多的 Svelte 开发者加入了 Storybook Discord，Storybook 7.0 测试版中的初步数据显示，升级的 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（目前处于测试阶段）和 SvelteKit 1.0。

开始使用非常简单。请查看完整文档。

新项目

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

npx storybook init

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

现有项目

如果您在项目中使用 Storybook 的版本低于 7，请使用此命令升级 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 阶段测试并报告错误和问题的用户。没有你们，这次集成不会如此出色。