Storybook 10：仅支持ESM，模块自动模拟使体积减轻29%

介绍

Storybook 10 引入了仅支持 ESM 的功能和 29% 的大小缩减，为具有现代工作流程的前端开发人员提升了性能。

性能与现代化

Storybook 10 的仅支持 ESM 的架构实现了更好的树摇和更快的安装。它提高了与流行的 IDE 环境 的兼容性，并简化了与 CI/CD 管道 的集成。

高级测试能力

与 Vitest 的合作带来了自动模拟功能，使得在 Vite 和 Webpack 上进行测试更加容易，减少了设置时间。开发人员赞赏使用 调试工具 简化的测试。

增强的组件创作

现在处于预览阶段的 CSF Factories 提供了更好的类型安全和自动完成功能，简化了故事创建。这补充了 代码检查工作流程 并与 版本控制系统 集成。

优缺点

优点

• 29% 更小的包大小，用于更快的安装
• 仅支持 ESM 符合现代 JavaScript 标准
• 自动模块模拟简化了测试设置
• 使用 CSF Factories 增强类型安全
• 改进了对 Svelte 和 Next.js 的框架支持
• 通过基于标签的故事排除实现更好的开发工作流程
• 与最新工具版本的兼容性

缺点

• 仅支持 ESM 的方法破坏了 CommonJS 配置
• 现有 Storybook 项目需要迁移
• 新自动模拟系统的学习曲线
• 与旧工具潜在的兼容性问题

结论

Storybook 10 通过 ESM 支持、性能提升和改进的测试，推动了现代 JavaScript 开发，使得迁移对于致力于前端工作流程的团队来说是值得的。