前端进阶(7) - react、vue 组件开发利器:storybook

senntyou

react、vue 组件开发利器:storybook

对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以 reactvue 为主。但平时在开发组件,尤其是公共组件或者第三方组件库的时候,往往会有一些困扰:

  • 不能很好的管理多个组件,尤其是在组件预览的时候,不能一目了然
  • 在组件预览的时候,也不能很好的反应一个组件的多个不同状态
  • 自动化交互测试可以使用 enzyme,但很多时候还得手动测试,就比较麻烦了
  • 在写文档的时候,需要将组件预览和文档写在一起,并需要切换到不同的状态,就比较吃力了

所以,storybook 就是为了解决这些问题而出现的,它为你的组件搭建了一个强大的开发环境,主要提供了以下的几个功能:

  • 提供了一个强大的 UI 组件管理页面,可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态
  • 在自动化交互测试之外,可以很方便的进行手动交互测试,并且可以动态改变组件参数,查看视图变化
  • 可以将组件预览导出为静态资源,这样就可以很方便查看组件的文档和不同参数对应的不同视图
  • 还有一系列的插件,提供了很多额外的功能,帮助你更好的开发、测试、优化组件

社区已经有很多组件库都在使用 storybook 开发,比如:

再顺便截个图吧

图片描述

1. 框架适配

2. 开发与命令

2.1 如何写一个 story

查看 storybook - Writing Stories,了解怎么写 stories 与怎么用插件。

2.2 添加 storybook

# 安装全局命令
npm i -g @storybook/cli

# 初始化已有项目(不会对原项目产生影响,只添加必要的配置与脚本而已)
cd my-project-directory
getstorybook

# 运行 storybook
npm run storybook

如果需要手动添加 storybook 或它的插件,可以查看:

2.3 将组件预览导出为静态资源

# 添加到 package.json 的 scripts
{
  "export-storybook": "build-storybook -c .storybook -o .out"
}

# 运行命令
npm run export-storybook

3. 后续

更多博客,查看 https://github.com/senntyou/blogs

作者:深予之 (@senntyou)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证

阅读 4.3k

前端小站
web, 前端, javascript, nodejs, electron, babel, webpack, rollup, react, vue ...

达则兼济天下,穷则独善其身。

12.3k 声望
4.3k 粉丝
0 条评论

达则兼济天下,穷则独善其身。

12.3k 声望
4.3k 粉丝
宣传栏