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 取得了巨大的增长。最近的 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.0 版本之前已经在项目中使用 Storybook，请使用此命令升级 Storybook，然后按照提示操作

npx storybook upgrade

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

如果你的现有 Storybook 设置使用的是 Webpack 构建器，它无法自动为你迁移，因为无法将你的 Webpack 配置迁移到 Vite 配置。在这种情况下，请改用手动迁移步骤。

这仅仅是开始

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

以下是未来发展方向的概述

特别感谢

SvelteKit 的集成之所以能够实现，离不开Ben McCann 的出色工作。此外，Ian Van Schooten 在 Vite 构建器方面取得的巨大进展和反馈帮助实现了 SvelteKit 的集成。最后，我们要非常感谢所有在 Alpha 和 Beta 阶段进行测试并报告错误和问题的用户。没有你们，这次集成就不会如此出色。