Storybook 将仅支持 ESM

ESM（ECMAScript Modules）多年来一直是 JavaScript 的“未来”。不幸的是，它也一直处于过渡状态。

一些工具早期就采纳了 ESM，推动了生态向前发展。另一些则犹豫不决，因为迁移很困难。许多库没有切换到 ESM，因为这会是破坏性更改。那些勇敢地切换以推动生态发展的库，可能会给用户和维护者带来麻烦，面临令人沮丧的升级路径和复杂的编译设置。

现在，Storybook 准备好为拥抱这一标准贡献一份力量。我们相信 ESM 是未来，并且终于可以迈出我们自己的这一步了。

🧭 ESM 为什么如此重要？

ESM 是 JavaScript **官方**、**标准化**的模块系统。它可以在浏览器和 Node.js 中原生运行，并且是 Deno 和 Bun 等现代运行时的基础。

相比之下，CommonJS 是在 ESM 广泛可用之前被许多生态系统采用的非标准化模块系统。

整个 JavaScript 生态系统正在向 ESM 标准靠拢。

管理两个并行模块系统（ESM 和 CJS）会带来严峻的挑战。库作者面临更高的复杂性，而用户则会遇到令人沮丧且难以调试的问题。

多年来，Storybook 团队一直希望通过采用纯 ESM 方法来推动生态发展（并获得性能优势）。

不幸的是，我们不得不一再推迟这一过渡。潜在的中断性是相当大的，而且我们缺乏一个不会破坏生态系统中大部分内容的清晰路径。

🫤 双构建很痛苦

为了同时支持 CommonJS 和 ESM，Storybook 一直在提供双构建。我们对源代码进行了两次编译和分发：一次是 ESM，一次是 CommonJS。

这种方法曾一度有效，但带来了巨大的弊端：

• 软件包大小几乎翻倍
• 更高的维护复杂性
• 由于重复或不匹配的包而导致的细微 bug
• 构建工具和核心代码中需要进行必要的变通，以防止这些 bug

对于 Storybook 10，我们计划最终过渡到纯 ESM，并接受由此带来的中断。

然而，多亏了 Joyee Cheung（以及所有参与者）在 `require(esm)` 方面付出的巨大努力，我们现在可以在不破坏周围生态系统的情况下，为 Storybook 进行此过渡。

对于所有为此做出贡献的人，我们感激不尽。如果您还没有阅读她的 博客文章，或者还没有看过她关于此事的精彩 演讲，我们强烈推荐两者。

🪶 双构建导致臃肿

双构建为所有安装和使用 Storybook 的用户增加了额外的负担。

与 Storybook 9 相比，切换到纯 ESM 使安装大小减少了约 **15%**。

这个缩减幅度本可以接近 **50%**。毕竟，我们确实停止了两种分发中的一种。Storybook 团队选择用一个更大的数字来换取发布**可读的、未压缩的代码**。

这具有重要的优势：

• 代码开箱即用，人类可读
• 更容易调试和维护
• 可以检查和审计代码中的安全问题

我们认为 15% 的尺寸缩减并非微不足道，发布未压缩的代码将使 Storybook 长期成为生态系统中更好的组成部分。

🧱 Storybook 10 有哪些变化？

从 Storybook 10 开始，我们将提供纯 ESM 构建。

这一变化带来了多项显著优势：

• 更小的软件包尺寸 (15%)
• 更整洁的代码库，减少了条件判断和变通方案
• 减少了因模块重复和别名引起的 bug
• 为 Storybook 及其生态系统打下更具未来保障的基础

我们已努力在可能的情况下保持向后兼容性。大多数插件应继续无缝工作。对于不兼容的插件，我们将提供清晰的指导和支持。

您应该了解以下破坏性更改：

• 您需要一个支持 `require()` ESM 的 Node.js 版本，即 `20.16`、`22.19`、`24` 或更高版本。
• 您的 Storybook 配置和 story 文件必须是有效的 ESM。
• 更多详情请参阅我们的 迁移指南。

🧪 立即试用 Storybook 10

Storybook 10 目前处于 Beta 测试阶段，稳定版预计将在几周后发布。

您可以使用此命令在新项目中试用它：

npm create storybook@next

如果您有现有的 Storybook 9 项目，可以使用此命令进行升级。利用我们的自动化迁移向导来帮助您完成升级过程。

npx storybook@next upgrade

您可以在我们的 迁移指南 中查看更改。

🦸 展望未来

ESM 是迈向更健康、更简单、更统一的 JavaScript 生态系统的关键一步。虽然双模块支持在让我们走到今天这一步发挥了作用，但现在是时候向前迈进了。

我们很高兴能在 Storybook 10 中进行这次过渡，并期待看到它解锁哪些新的可能性。

我们要感谢以下先驱，是他们让这次改变成为可能：

• Titus Wormer (@wooorm) - 尽管面临社区阻力，他仍然推动了整个统一生态系统转向 ESM，并对此决定进行了广泛的撰述。
• Rich Harris - Svelte 的创建者，早期 ESM 的倡导者。
• Marvin Hagemeister - Preact 的维护者，他帮助导航了 Preact 的过渡。
• Fred K. Schott - Snowpack 和 Astro 的创建者；坚定的早期 ESM 倡导者。
• Guy Bedford - Node.js ESM 实现的合著者，曾致力于 JSPM 和 Import Maps。
• Joyee Cheung - Node.js ESM 实现的关键贡献者，近期改进了兼容性，使得 Storybook 这样的过渡成为可能。
• Sindre Sorhus - 数百个流行 npm 包（包括 `got`、`meow`、`conf` 和 `update-notifier`）的维护者，这些包已转向纯 ESM。