前言

• 我一开始以为storybook是做组件库用的，随着我后面了解越来越深发现压根不是这么回事。

• 我在写组件库中发现，很多功能比如umi-library(现在改名umi-father)都有了，storybook和umi-farther用的都是docz，那我直接用docz，干嘛用storybook？后来经过我不断的翻storybook才发现storybook压根不是只为了做组件库存在的。

storybookUI

• 我们先说一下不装插件的storybookUI，奇丑无比，一个canvas的tab页，看起来特别特别奇怪，光这ui就让不少人不想用这工具了。没错，一开始我也这么觉得的，但storybook有个插件，以前是addon-info，现在变成了addon-docs，并且生成文档可以只输出docs内容，而不输出它原本的canvas内容。这个工具用起来很顺眼，而且做出来效果跟umi-farther那些差不多，毕竟都是用了docz，于是我就先用这个了。
• 后来，我就觉得，storybook干嘛搞一个那么丑的canvas？storybook做这个canvas难道不想让别人用？一个为视觉开发者做的工具，制作者不可能连基本的审美也没有吧？
• 经过我探索发现，storybook是做的一个平台用来整合各种工具，而它的canvas，并不只是展示组件那么简单，展示组件用docs插件呗，所以它这玩意其实是想做成一个类似工作台一样的东西。
• 另外，它支持各种主流前端框架，还有些神奇用法，可以自己探索下。
• 这个像工作台一样的东西不是用来展示给外人看的，而是为了内部使用，展示给外人看就用docs插件就好了。

原子设计，CDD组件驱动开发与storybook设计工作流

• 我以前也没听过什么原子设计，自从发现storybook的奇怪ui后才各种搜索知道的。
• 原子设计的理念就是先造出原子，然后从原子造分子，最终造出页面，以及app。这个方式很麻烦，但是会有很好的效果。
• 比如一个公司的所有产品，全是一个风格，那么就有很强的品牌感，如果有地方需要修改，那么所有组件全部都可以统一样式观察。还有的优势可以参考我百度到的这篇文章。
• 说了这么多，来个原子系统案例，此案例并非storybook制作。在线预览地址。
• 这个人是Brad Frost，原子设计系统创造者，storybook官网也有引用他说的一段话：
  “Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.”
• 来个storybook官方给的工作流：

• storybook试着去探索了几个设计流的最佳方案，做了几个说明书，其中组件开发人员的搞完了，设计人员的还没弄完。感觉设计人员的使用教程应该是围绕chromaui来进行。storybook可以把组件导入chormaui软件，有个线上版本的软件，类似于sketch一样的东西。chormaui就是storybook的幕后公司。
• 用storybook自己的话来说，如果一个组件被复用过3次，那么这个组件应该写到组件库里，如果一个组件库被复用3次以上，那么这个组件库应该拿来做成设计系统。
• 所以按我个人的理解，设计系统是在组件库之上的存在。
• 利用storybook制作设计开发范例。
  
• 另外可以他们怎么利用storybook设计storybookUI的，并不是特别死的照搬原子设计storybookUI设计开发范例。

• storybook的幕后公司chormaui在搞组件驱动开发(Component-Driven Development)，也就是CDD，这个思想基于原子设计理念与一些现在比较流行的微前端概念，去掘金百度搜个CDD啥也没有。。
• 我翻到一篇讲CDD的文章感觉讲的很好CDD开发指南。
• CDD个人简单理解，就和字面意思一样，是通过组件来驱动开发。就像TDD是测试驱动开发，而CDD就是完成所有组件的各种功能，以及其基本元素，开发时只要各种组合即可。有人可能会问，这和我直接去antd上拿写好的组件库有什么区别呢？个人理解，区别有以下几点：
  1、可以同时并行开发并修改工作。比如一个团队，每个人都去antd上拿组件，结果设计师觉得某个地方颜色都得换掉，那么就得通知所有人把自己copy的组件全部换一下，这就是及其浪费效率的。但使用CDD开发，只要修改基本元素样式，就可以保证团队开发出的所有组件全部样式统一。新项目来的话，直接复用或者开发组件，调整风格即可。
  2、更好的解耦拆分与维护。你做一个项目，一般不可能所有组件都能可以从antd上找到，总得自己做点什么东西吧，或者你需要加点自己的元素之类。但是这样你就是从0开始制作，或者因为对这个组件不熟悉而花时间去研究。而进行CDD开发，并不需要从0开始，只要拿到所需要的元素，既能保证风格统一，又能加快开发效率。
  3、更加强大的代码共享。如果有队友写好一个组件，可以直接拿来复用，而不需要另外担心样式风格不统一的问题。
  4、更短的学习曲线。由于是组件驱动开发，所以每个开发人员对于组件理解更熟练，开发新项目时开发速度更快！

storybook插件

• 官网插件knobs,actions,source,docs,viewport,storyshots,backgrounds,accesssibility,console,links
• 一般安装完，官方默认给配了actions,插件和links插件

actions插件

• 有actions，就会有个控制台一样的面板，有点像jest的mockfn一样，触发组件操作可以通过它提供的函数打印到面板上。
• actions插件文档。

links插件

• 这个插件比较常用，可以在不同story间进行跳转，可以当是个a链接用。
• links插件文档。

knobs插件

• 这个插件厉害了，主要是用来生成变量，并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字，那么文字可能有长有短，就可以使用这个插件设定一个长的文字和一个短的文字，预览时可以切换。
• 另外还有很多强大功能。甚至可以代替background插件改变背景颜色。
• knobs效果在线预览
• knobs插件文档

console插件

• 需要借助于action插件来输出，为啥要用这个插件说明上写了，说可能有些情况要。。。反正我有点没理解。

• addon-console预览界面

• addon-console插件文档

source插件

• 直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。
• source插件文档

docs插件

• docs插件就不用说了吧，支持mdx，就是最后可以展示给不懂行的人看的文档。
• 我自己写了个组件库玩，还没写完，很多高级功能都没用，感觉这些功能比较适合团队开发，我一个人当然图快，主要就是靠docs插件做文档，同时部署静态网站到githubpage。我的组件库在线预览。
• docs插件文档

viewport插件

• 这个插件可以对tab页新增个选项，跟chrome里的切换不同设备有点像，使用这个功能，就可以把一个组件放入不同设备大小的story里。
• viewport插件文档。

background插件

• 可以设置story的背景颜色之类，当然也有些简单方法可以不需要background插件就能设置背景。
• background插件文档。

accesssibility插件

• 又叫a11y插件，有点相当于组件级别的lint，可以自动检验组件是否符合某些规范。一般是用来检查视障人士能不能分辨之类的。基于axe搞的。
• 效果预览地址。
• a11y插件文档

storyshots插件

• 这个插件官网写的让人有点晕，实际还分成2个插件，都是jest相关。
• 主要插件是storyshots，它可以把jest运行结果置于底部控制台页上，介绍说还可以拿到旧代码快照什么的，有点没懂怎么搞。
• 另一个插件是storyshots-puppeteer，基于上面那个，pupeteer就有点像selenium一样开个虚拟浏览器去做测试。
• storyshots插件文档
• puppeteer插件文档

好用的社区插件

• 官方插件就上面那些，有些社区插件写的也很不错，可以看看。

storybook-mobile插件

• 可以给你的移动端网站用户体验上自动提供建议。
• 这个功能相当6啊，对于移动开发经验不足的人有很多帮助。
• 插件使用后在线预览地址
• 插件文档地址

storybook-design-token插件

• 这个插件我个人觉得适合比较大的项目，我们写样式往往要制作多个变量，比如antd那个样式文件，定义了很多很多变量，还有动画之类的，但人脑肯定记不过来，就算记得了也可能记不得它是什么效果。有了这个插件，就可以把变量和效果全部展示出来。在开发过程中提供帮助。
• 插件文档地址
• 作者设计思想
• 在线预览地址

Apollo Storybook Decorator插件

• 用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。
• 插件文档地址

storybook-graphql-kit 插件

• 也是graphql的一套工具，可以在线修改数据之类。
• 插件文档地址

Readme 插件

• 这个功能有点对标了docs插件，感觉适合纯内部分享使用，它可以对每个story做一个文档说明，并且功能和docs差不多，就是docs是在tab页并且可以独立输出，这个是在addons界面，并且不是默认展现，每个都需要点一下看见。
• 效果在线预览
• 插件文档地址

storybook-addon-versions 插件

• 这个插件不支持storybook5，有段时间没维护了，就说一下功能吧，就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子，1.0.1的button是另一个样子，那么就可以来回切换看。

story2sketch 插件

• 很多设计师会用sketch软件，这个工具可以把storybook的文件导出，导入给sketch使用。不过这个只支持5以下，storybook6本身就可以自己导出给sketch了。
• 插件文档地址

jsx插件

• 这个插件感觉有点对标source，或者是docs部分功能。可以显示story中jsx怎么写的。
• 插件文档地址

storybook-addon-react-live-edit 插件

• 在线实时编辑，感觉这个功能有点对标knobs。
• 插件文档地址

i18n 插件

• 全局国际化用。
• 插件文档地址。

storybook-host 插件

• 这个插件可以设定故事iframe设定些属性。
• 插件文档地址

Specifications Addon 插件

• 这个插件可以用来整合一些测试工具到storybook上，有点类似storyshots插件

Storycap 插件

• 这个插件名字起的挺好啊，用途就是通过puppeteers来对每个故事截图，然后生成到文件夹里。
• 插件文档地址

storybook-addon-responsive-views 插件

• 响应式布局一次头全预览！不过感觉加了viewport然后使用docs插件也能做到。
• 插件文档地址

Storybook Playroom Addon 插件

• 可以同时浏览在不同分辨率下的效果。
• 插件效果在线浏览
• 插件文档地址

storybook-addon-theme-playground 插件

• 可以对每个story设置主题，有点像做好参数的knob。
• 在线预览地址
• 插件文档地址