用于 Vite 的 Storybook
使用原生 ES 模块的闪电般快速的开发
还记得 Javascript 疲劳 吗？那是 2015 年，每隔几个小时就会出现一个新的框架/样板/构建工具，超越之前的竞争者并冲上 Hacker News 的榜首。
最终，React 和 Webpack 成为事实上的标准，相对的平静降临大地。前端开发人员能够放松下来，完成实际工作，而不是每隔几周就疯狂地切换工具。
今天，Web 工具世界正在经历一场新的剧变，引人注目的新 Webpack 替代品正在迅速崛起。Snowpack、ESBuild、Vite、SWC、Rome、Parcel、Rollup…… 列表还在继续。
在 Storybook 这个用于隔离组件开发的工具中，我们是新一代高性能工具的忠实粉丝。
在 Storybook 6.3 中，我很高兴地宣布 Storybook Vite 构建器，这是一个社区主导的项目，旨在支持最热门的构建工具之一。请继续阅读以了解有关 Vite 的更多信息、如何在 Storybook 中使用它，以及我们未来支持社区构建器的路线图。
什么是 Vite？为什么你应该关心？
在成为下一代标准的竞赛中，Vite 处于领先地位。
Vite 的 存在理由 是速度。（Vite 在法语中意为“快”！）。通过利用现代 ESM 和底层的 ESBuild，它实现了 10-100 倍的启动速度提升。保存代码更改和在浏览器中看到这些更改之间的时间也从未如此之快。
但它还有更多优点。Vite 附带了适用于大多数主要框架的出色项目模板，具有熟悉的 Rollup 风格的配置人体工程学、强大的插件生态系统，甚至得益于 Rollup，还具有成熟的生产打包功能。
Vite 已经成为 Vue 和 Svelte 的官方打包器，并且对于 React 和 Lit 等其他框架来说也是越来越受欢迎的选择，因此即使您尚未用过它，将来很有可能会用到。
Storybook Vite 构建器
从 Storybook 6.3 开始，得益于 Eirik Sletteberg、Sasan Farrokh 和 Ian VanSchooten 的英勇工作，您可以使用 Vite 构建您的 Storybook。
Storybook 6.2 引入了一个新的 可插拔构建器 API，并且 storybook-builder-vite 是第一个出现在场景中的非 webpack 构建器。
当您将新构建器添加到您的项目时，Storybook 将停止使用 webpack 打包，并开始使用 Vite 打包。
这意味着您可以期待以下好处
- 构建速度大幅提升
- 与您的 Vite 项目设置兼容
- 访问 Vite 的插件生态系统
需要注意的是，它仍然是实验性的（尽管它已经被多个生产团队使用！）。此外，我们仍在研究保证与 Storybook 的 插件生态系统 兼容的最佳方法，其中一些插件依赖于 Webpack。
立即获取
只需一分钟即可试用 Vite 构建器。如果您已经有一个 Vite 项目，您可以运行
npx sb init --builder @storybook/builder-vite
npm run storybook如果您没有 Vite 项目，则很容易开始
npm init viteVite 支持各种模板，包括 React、Vue、Svelte、Preact 和 Lit。并且为每个模板都包含 JS 和 TS 变体。
构建器路线图
如果您已看到此处，您可能想知道 Storybook 支持其他下一代构建器的计划。
我们相信工具多样性创造了一个健康的 Web。这就是为什么 Storybook 支持每个主要的 Web 框架，包括 React、Vue、Angular、Svelte、Lit、Ember、Marko 等。
我们对构建器采取了相同的方法。在 6.2 中，我们推出了一个 可插拔构建器 API 和实验性的 wepback5 构建器。在 6.3 中，我们将 webpack5 支持升级为“稳定版”，并且我们正在引入社区 Vite 构建器。
有进取心的社区成员也在尝试 Snowpack 构建器等等。我们很乐意您帮助开发和维护这些新构建器！
结论
这个新的构建器生态系统开启了性能的新时代。这意味着开发服务器的启动时间快 10-100 倍。以及更小的生产构建包。
我们正在为 Storybook 进行性能重新架构。为了更好地支持代码拆分、懒加载编译和更快的开发体验。在此重新设计期间，我们将考虑替代构建器。我们期望 Storybook 7.0 成为现代构建器生态系统的更好平台。
参与进来
专业的 UI 开发人员每天都依赖 Storybook。当您采用 Storybook 时，您可以确信它将与最新的生产就绪工具一起工作。
该项目由 1,300 多名开源贡献者维护，并由顶级维护人员组成的指导委员会指导。如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐款。如果您有兴趣将新的构建器变为现实，请在 Discord 中与我们聊天 — 维护人员通常在线。在 Twitter 上以及通过注册我们的邮件列表来了解 Storybook 的最新消息。