Storybook：多框架兼容的前端组件开发工具，高效解决组件隔离开发与文档管理问题
前阵子团队做前端项目，光按钮组件就有十几种 —— 有的带图标，有的带下拉菜单，有的点了之后会加载中，新人接手的时候，要么翻遍别人的代码找用法，要么直接复制粘贴，结果经常因为没传对 props 导致样式错乱，光解释 “这个按钮的 disabled 属性要传布尔值”“图标要放在 iconProps 里”，我每周都得说好几遍，你想想看，这多浪费时间啊？
后来小索奇在整理前端工具库的时候，翻到了 Storybook 这个 Github 项目（仓库地址：GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation），试了一次就觉得 “这简直是组件开发的救星”—— 它能帮你 “隔离开发” 组件，不用依赖整个项目，不用等后端接口，甚至不用搭页面，单独就能写组件、调样式、测交互，写完还能自动生成文档，团队谁要用都能直接查。
它的用法不算复杂，就拿 React 项目举例，先装依赖 “npx storybook init”，系统会自动在 src 里建个 stories 文件夹，你只要在里面写组件的 “故事”（也就是 stories 文件）就行。比如写个 Button 组件，新建个 Button.stories.jsx，里面定义不同状态的按钮，像这样：
import Button from './Button';
export default {
title: 'UI 组件 / Button', // 文档里的分类和名称
component: Button, // 关联的组件
};
// 默认状态的按钮
export const Default = {
args: {
label: ' 默认按钮 ',
disabled: false,
},
};
// 禁用状态的按钮
export const Disabled = {
args: {
label: ' 禁用按钮 ',
disabled: true,
},
};
// 带图标的按钮
export const WithIcon = {
args: {
label: ' 带图标按钮 ',
icon: 'search',
disabled: false,
},
};
写完之后跑 “npm run storybook”，会自动打开一个本地页面 —— 左边是组件分类列表，比如 “UI 组件” 下面能找到 Button；中间是组件预览，点不同的故事（比如 Disabled），就能看到禁用状态的按钮；右边还有个 Controls 面板，能直接改 props 的值，比如把 label 改成 “新按钮文字”，把 disabled 切成 true，中间的按钮会实时变，不用改代码再刷新，调样式的时候特别方便。
我还特意试了它的兼容性，不光 React，Vue、Angular 甚至 Svelte 这些框架都支持，只要装对应框架的适配包就行。之前团队里有个 Vue 项目，装了 @storybook/vue3 之后，写 Vue 组件的 stories 和 React 差不多，生成的文档界面也能和 React 项目的合并，统一放在服务器上，不管是 React 开发还是 Vue 开发，打开同一个地址就能查所有组件，不用记两个链接。
不过有个小细节要注意，刚开始配置的时候可能会踩坑 —— 比如 Vue3 项目要手动装 @storybook/addon-essentials 这个插件，不然右边的 Controls 面板出不来；还有如果组件依赖了全局样式（比如项目里的主题变量），得在.storybook/preview.js 里引入，不然预览的时候样式会乱。第一次用的时候我就因为没引样式，导致按钮的颜色全错了，后来查了文档才搞定，好在官方文档写得挺详细，跟着步骤走很快就能解决。
对了，它还有很多实用的插件，比如 addon-actions，能帮你看组件触发的事件 —— 比如按钮点击事件，点一下预览里的按钮，右边面板就会显示 “onClick 被触发”，还能看到传的参数；还有 addon-docs，能自动把你写的注释转成文档，比如在 Button 组件里写 “@param {string} label - 按钮文字”，文档里就会显示参数说明，不用单独写文档。
你有没有过这种经历？写组件的时候得先启动整个项目，等半天加载完，再跳转到对应页面才能看效果？或者组件多了之后没文档，新人要用只能靠问？你用过其他组件开发工具吗？评论区聊聊，好工具互相分享，大家写组件都能省点力～
我是【即兴小索奇】，点击关注，获取更多相关资源