前端进阶（7） - react、vue 组件开发利器：storybook

react、vue 组件开发利器：storybook

对于前端开发来讲，组件化技术已是一门必修课了，这其中又主要以 react 和 vue 为主。但平时在开发组件，尤为是公共组件或者第三方组件库的时候，每每会有一些困扰：

• 不能很好的管理多个组件，尤为是在组件预览的时候，不能一目了然
• 在组件预览的时候，也不能很好的反应一个组件的多个不一样状态
• 自动化交互测试能够使用 enzyme，但不少时候还得手动测试，就比较麻烦了
• 在写文档的时候，须要将组件预览和文档写在一块儿，并须要切换到不一样的状态，就比较吃力了

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

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

社区已经有不少组件库都在使用 storybook 开发，好比：

• react-dates 的 storybook react-dates - storybook
• react-native-web 的 storybook react-native-web - storybook

再顺便截个图吧

1. 框架适配

• React
• React Native
• Vue
• Angular
• Polymer
• Mithril: 目前尚处 alpha 阶段
• Marko: 目前尚处 alpha 阶段
• HTML: 目前尚处 alpha 阶段
• Svelte: 目前尚处 alpha 阶段
• Riot : 目前尚处 alpha 阶段

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 或它的插件，能够查看：

• Storybook for React
• Storybook for Vue
• Storybook for Angular

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许可证）