Library storybook 隔离构建与测试UI组件的工具

组件写着写着就乱了：按钮在 A 页面正常、在 B 页面崩；改一处样式，三处莫名回归；新人接手根本不知道有哪些组件可用。Storybook 解决的就是「组件看不见、测不了、文档散」的痛点。它把每个 UI 组件放进一个独立的「工作室」里，隔离渲染、交互调试、自动出文档，是前端圈公认的行业标杆。

项目基本信息

一、项目介绍

Storybook 是构建、文档化与隔离测试 UI 组件的前端工作室，支持 React、Vue、Angular、Svelte、Web Components 等几乎所有主流框架，已稳定运行近十年。它让你在不启动整个应用的情况下，单独渲染某个组件、切换不同入参（stories）、查看交互状态，并自动生成可交互文档与可视化测试，被无数团队用于组件开发与交付。

二、核心优势

• 隔离开发：组件脱离业务页面单独调试，专注度高。
• 多框架：React/Vue/Angular/Svelte 全覆盖。
• 文档自动：stories 即文档，可视化、可交互。
• 生态大：海量 addons（a11y、测试、设计稿对接等）。

三、适用场景

• 中大型项目的组件资产沉淀与协作。
• 设计系统（Design System）的落地与展示。
• 组件可视化回归测试。
• 前后端并行开发时的 UI 契约。

四、安装教程

在已有前端项目里一键初始化：

npx storybook@latest init

它会自动识别框架并装好依赖、写好脚本。启动开发服务器：

npm run storybook

常见报错：framework not detected——确认项目含受支持的框架；port in use——用 --port 换端口；依赖冲突时先 npm dedupe。

五、使用示例

写一个按钮的 story：

// Button.stories.tsx
export const Primary = { args: { variant: "primary", children: "确定" } }

在 Storybook 界面里即可切换 args、查看不同状态、运行交互测试，无需启动主应用。

六、常见问题

• 只支持 React 吗？不，主流框架都支持。
• 会拖慢构建吗？仅开发态加载，不影响生产包。
• 能接设计稿吗？有 Figma 等 addon 对接。
• 和测试怎么结合？可用 Testing 类 addon 做可视化回归。

七、总结

Storybook 把组件开发从「埋在页面里猜」变成「在工作室里看」。它让 UI 资产可视、可测、可文档化，是任何重视组件质量与协作效率的团队都该引入的基础设施。