Storybook 对接 Vite
使用原生 ES Modules 实现闪电般快速的开发
记得 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 和实验性 webpack5 构建器。在 6.3 中，我们将 webpack5 支持提升到“稳定”阶段，并引入了社区 Vite 构建器。
富有进取精神的社区成员也在探索 Snowpack 构建器等等。我们非常欢迎你帮助开发和维护这些新的构建器！
结论
这个新的构建器生态系统开启了性能的新纪元。这意味着开发服务器的启动时间快了 10-100 倍。并且生产构建的打包体积更小。
我们正在对 Storybook 进行性能重构。以更好地支持代码分割、懒编译和更快的开发体验。在这次重新设计中，我们将考虑备选的构建器。我们期待 Storybook 7.0 能成为现代构建器生态系统更好的平台。
参与进来
专业的 UI 开发者每天都依赖 Storybook。当你采用 Storybook 时，你会对其能与最新的生产就绪工具协同工作充满信心。
该项目由 1,300 多名开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果你有兴趣贡献，可以在 GitHub 上查看 Storybook，创建议题或提交拉取请求。在 Open Collective 上捐赠。如果你有兴趣开发一个新的构建器，请在 Discord 中与我们交流——通常有维护者在线。通过 Twitter 和订阅我们的邮件列表来了解 Storybook 的最新消息。