Webpack 5 的 Storybook

我们很高兴宣布 Storybook（全球最受欢迎的 UI 组件工作坊）已开始实验性支持 Webpack 5。

Webpack 为现代网络提供了强大的支持，它也是 Storybook 的核心。因此，升级到 Webpack 5 不仅有助于推动网络发展，还能为 Storybook 用户带来直接的好处。

• 生态系统兼容性
• 可使用模块联邦等新功能
• 性能提升

此外，作为这项工作的一部分，我们创建了一个可插拔的构建器（builder）抽象层，使我们能够探索下一代构建器，如 Snowpack、ESBuild、Vite 等。

什么是构建器？

Storybook 的核心是一个构建工具。用户编辑组件、主题、stories（组件示例），工具链将源代码转换成可执行的 bundle，并实时更新浏览器。

我们将这个过程称为构建器（builder），因为它包含了打包器及其配置，配置本身可能很复杂。在 Storybook 中，打包器是 Webpack，配置是预设的集合，它们共同驱动 Webpack 和 Babel 处理源代码输入，包括 Javascript、TypeScript、CSS、MDX，以及可选的框架特定文件，如 Vue 或 Svelte 的 SFC 文件。

考虑到这一切，Webpack 主要版本升级对 Storybook 来说是个难题。它们涉及升级 Webpack 本身、各种插件以及所有这些的配置。这也会强制 Storybook 进行主版本升级，这是我们尽量避免的。此外，强制升级会切断对现有 Webpack 4 工具的支持，例如 Create React App。

Storybook 6.2 中引入了一个新概念——构建器。构建器抽象了打包器依赖、其插件依赖甚至配置处理过程，使我们能够通过配置同时支持 Webpack 4 和 5。

Webpack 5 支持

Webpack 5 升级是 Storybook 在 Github 上获得最多赞的议题。由于 6.2 是一个小版本，Webpack 4 仍然是默认的构建器。但您可以通过选择启用 Webpack 5 来开始使用它。

对于新的 Storybook 安装

npx sb init --builder webpack5

对于现有的 Storybook，升级到最新版本，添加 @storybook/builder-webpack5，并在 .storybook/main.js 中设置 core.builder 配置（完整说明）。

升级后，您的组件、样式和 stories 将使用 webpack5 和兼容 webpack5 的 loader/plugin 进行打包。

下一代打包器

您可能已经看到了围绕下一代打包器的热议。Snowpack、ESBuild 和 Vite 是其中的一些常见工具。

可插拔的构建器为将这些下一代打包器集成到 Storybook 中打开了大门。这些工具利用简化的假设（例如原生浏览器 ESM）和高性能实现（例如 Golang）来获得令人瞩目的性能指标，例如 ESbuild 的这项成果。

虽然仍处于早期阶段，但我们对高性能打包器的探索直接服务于我们提高 Storybook 性能的首要任务。

它还赋予我们适应 JS 生态系统变化的灵活性。我们致力于提供一流的 Webpack 支持，但也希望确保无论发生什么，我们都能处于有利地位。如果您有兴趣创建自己的构建器，请加入 Storybook Discord 与我们交流！

后续步骤

Storybook 6.2 现已提供 Webpack 5 支持。在项目根目录运行以下命令即可添加 Storybook。

npx sb init --builder webpack5

查看安装说明了解更多详情。

Webpack 5 目前处于实验阶段，待生态系统稳定。相关问题在 GitHub 上使用“webpack5”标签进行跟踪。 如果您遇到现有问题，请在该问题描述下点击👍以表示赞同。如果您发现一个尚未存在的问题，请使用“bug”问题模板提交一个新问题。

基于这项工作，我们计划进行重大改进，包括

• 6.3 版本中启用 Webpack5 后的性能改进
• 探索 Snowpack、ESBuild 和 Vite 等替代打包器
• 改进对 Webpack5 的插件支持

参与贡献

专业 UI 开发人员每天都在依赖 Storybook。我们的目标是简化常见流程，让您事半功倍。

该项目由 1200 多名开源贡献者维护，并由一个由顶级维护者组成的指导委员会指导。Webpack 5 支持由 Norbert De Langen 和 Michael Shilman（也就是我！）开发完成，并得到了 Clement Dungler、Tobias Koppers 以及其他 Storybook 社区成员的帮助。

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建议题或提交拉取请求。在 Open Collective 上捐赠。在 Discord 中与我们交流——通常会有维护者在线。在 Twitter 上关注 Storybook 最新动态，并订阅我们的邮件列表。