UI_DEV_Environment 之 StoryBook

写在前面

由于本文主要集中关注与工具使用，所以不可能完全介绍工具的所有功能，所以要想了解更多，可以自己去各自官方网站上查看。

什么是UI开发环境

UI开发环境专注于用户体验设计师与开发人员之间的协作（UI dev environments），为UI组件的快速迭代提供了综合环境。

通俗点来讲，目前主要应用于个项目中组件的测试、开发以及文档编写中，这样设计人员和开发人员可以通过组件预览的方式来指定设计规范。

目前可以使用的工具主要有：Storybook、React Styleguidist、Compositor和MDX。本文会重点介绍storybook以及React Styleguidist。

各工具之间的比较归纳

Tools	React/Angular/Vue	上手程度	主题自定义	附加功能(插件)	测试环境
Storybook	✔️ / ✔️ / ✔️	中等	简便、颜色变化	丰富(源码/viewport/backgrounds...)	提供了各种测试案例
React Styleguidist	✔️ / X / X	简单	简便、颜色结构变化	无	Enzyme、jest
Compositor	✔️ / X / X	简单	暂不支持	无	Enzyme、jest
MDX	✔️ / X / ✔️(Beta)	简单	简便、可以完全自定义	一般(remark/rehype )	Enzyme、jest

StoryBook

storybook的界面清新脱俗，至少个人认为还是比较好看的，像下面这样：

apperance

同时，storybook可以更换主题，具体可以戳这里，更换的只是配色系统，结构方面改动的话可能有点困难。

storybook 可以支持多种语言，包括react,vue,angular...等主流前端库。

storybook中的一个重要概念就是story，翻译过来就是故事，不过可以通俗的理解为一个组件的一种状态。当然这个状态是你自己添加的，如果添加的故事越多，同时也就表明了你编写的组件复杂度就很高了，这时候你就可以考虑是否要拆分组件来使得组件的功能变得单一纯粹了，这样组件维护的成本才会变少，同时可用性也会更加高。

简单的入门

下面以一个React小项目来练手，如果对Vue以及Angular感兴趣的童鞋，可以去官网了解一下，官方网站上有大量的例子以及新手教程。

Step 1: 创建一个项目名为`stroybook`, 同时创建`package.json`文件

mkdir stroybook
cd storybook
yarn init

填写你要初始化的信息，下一步。

Step2: 安装依赖

yarn add @storybook/react react react-dom babel-loader @babel/core --dev

Step3: 添加npm脚本

{
"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "serve": "yarn build-storybook && npx http-server ./storybook-static"
  }
}

storybook: 运行这个脚本会起一个本地服务器，监听在6006端口
build-storybook: 通过webpack进行打包，生成静态文件
serve: 使用node服务运行静态文件

Step4: 创建配置文件，让storybook能够找到stories

import { configure } from '@storybook/react';

// 手动添加所有stories
function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

/**
* 或者匹配指定文件夹下的所有stories
*

function loadStories() {
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

*/

configure(loadStories, module);

Step5: 编写组件故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => (
    <Button>Hello Button</Button>
  ))
  .add('with emoji', () => (
    <Button><span role="img" aria-label="so cool">