适用于 Webpack 5 的 Storybook

我们很高兴地宣布 Storybook 中对 Webpack 5 的实验性支持，Storybook 是世界上最受欢迎的 UI 组件工作台。

Webpack 为现代网络的很大一部分提供支持。它也位于 Storybook 的核心。因此，升级到 Webpack 5 不仅有助于推动 Web 的发展，而且还为 Storybook 用户带来直接的好处

• 生态系统兼容性
• 访问模块联邦等新功能
• 性能提升

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

什么是构建器？

从本质上讲，Storybook 是一个构建工具。用户编辑组件、主题、故事（组件示例），工具链将源代码转换为可执行的捆绑包，并实时更新浏览器。

我们将此过程称为构建器，因为它包含捆绑器及其配置，而配置本身可能非常重要。在 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 配置（完整说明）。

升级后，您的组件、样式和故事将与 webpack5 和 webpack5 兼容的加载器/插件捆绑在一起。

下一代捆绑器

您可能已经看到了关于下一代捆绑器的热议。Snowpack、ESBuild 和 Vite 是这里一些常见的选择。

可插拔构建器为将这些下一代捆绑器集成到 Storybook 中打开了大门。这些工具利用简化的假设（例如原生浏览器 ESM）和高性能实现（例如 Golang）来实现令人震惊的基准测试，例如 ESBuild 的这个基准测试

虽然仍处于早期阶段，但我们对高性能捆绑器的探索直接为我们改进 Storybook 性能的首要任务提供了支持。

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

下一步

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

npx sb init --builder webpack5

查看安装说明以获取更多详细信息。

Webpack 5 目前处于实验阶段，因为生态系统正在稳定。问题通过 GitHub 上的 “webpack5” 标签进行跟踪。 如果您遇到现有问题，请通过单击问题描述上的 👍 来为问题投票。如果您发现没有现有问题的问题，请使用 “bug” 问题模板提交新问题。

我们根据这项工作计划了重大改进，包括

• Webpack5 启用的 6.3 版本性能改进
• 探索替代捆绑器，例如 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 新闻，并通过注册下面的邮件列表保持最新。