UI_DEV_Environment 之 StoryBook

寫在前面

由於本文主要集中關註與工具使用，所以不可能完全介紹工具的所有功能，所以要想瞭解更多，可以自己去各自官方網站上查看。

• github
• examples

什麼是UI開發環境

UI開發環境專註於用戶體驗設計師與開發人員之間的協作（UI dev environments），為UI組件的快速迭代提供了綜合環境。

通俗點來講，目前主要應用於個項目中組件的測試、開發以及文檔編寫中，這樣設計人員和開發人員可以通過組件預覽的方式來指定設計規範。

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

各工具之間的比較歸納

StoryBook

storybook的界面清新脫俗，至少個人認為還是比較好看的，像下麵這樣：

同時，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">