手把手教你快速搭建專屬的storybook

kenzung發表於2019-01-05

什麼是Storybook

Storybook是一個輔助UI控制元件開發的工具。通過story建立獨立的控制元件，讓每個控制元件開發都有一個獨立的開發除錯環境。 Storybook的執行不依賴於專案，開發人員不用擔心由於開發環境、依賴問題導致不能開發控制元件。

Storybook支援的框架覆蓋主流的框架（React、Vue、Angular）。由於使用React作為技術棧，本文將介紹使用react的專案如何配置Storybook環境。

安裝

全域性安裝Storybook

npm i -g storybook
複製程式碼

執行以下命令安裝@storybook/react

npm i --save-dev @storybook/react
複製程式碼

在package.json檔案中

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}
複製程式碼

在工程根目錄建立.storybook目錄
在.storybook目錄下建立config.js檔案

import { configure } from '@storybook/react';
import 'index.scss';

function loadStories() {
  require('./stories/userStory');
}

configure(loadStories, module);
複製程式碼

建立story
雖然官方推薦在專案根目錄下建立stories目錄，但我比較喜歡在.storybook目錄下建立一個stories目錄。然後根據不同的業務模組建立不同的stories目錄。比如有個user模組，那麼我會建立一個stories/userStory目錄。

// stories/userStory/index.jsx
import React from 'react';
import { storiesOf } from '@storybook/react';
import BasicInfo from 'pages/clientDetail/components/BasicInfo';

storiesOf('使用者資訊', module)
  .add('基礎資訊', () => <BasicInfo />);
複製程式碼

至此，根據Storybook React Guide，我們配置了一個簡單的storybook環境。其實這個環境已經可以用了，當然，如果還需要一些額外的功能，比如支援less和scss等，就需要自定義webpack配置。

storybook 配置

1. 自定義webpack配置

storybook基礎webpack配置只包含以下幾項：

babel
- ES2016+ Support
- .babelrc support
Webpack
- CSS Support
- Image and Static File Support
- JSON Loader

有時候預設的webpack配置不能滿足我們的專案，因此需要對webpack配置進行擴充套件。

通常我使用的是Full Control Mode對webpack配置進行修改。首先在.storybook目錄下增加webpack.config.js檔案

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  // 現在應該很多專案會使用`less`或者`scss`等css預處理技術。
  // 這裡使用了postcss-loader進行處理
  storybookBaseConfig.module.rules.push({
    test: /\.s?css$/,
    use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  return storybookBaseConfig;
};

複製程式碼

注意 1：預設配置失效

如果使用自定義的配置，預設配置就會失效，如果沒有重新配置file-loader，storybook執行起來時候假如有控制元件引用了圖片等檔案會報錯。

  // 預設配置會失效，處理檔案需要配置相應的file-loader
  storybookBaseConfig.module.rules.push({
    test: /\.(gif|png|jpe?g|eot|woff|ttf|pdf)$/,
    loader: 'file-loader',
  });
複製程式碼

注意 2：保留原配置上修改

使用Full Control Mode模式雖然可以最大限度修改storybook的webpack配置，但是以下配置修改時需要注意在原配置上進行擴充套件。

entry
output
first loader in the module.loaders (Babel loader for JS)
all existing plugins

比如需要新增一個loader，需要像面那樣push一個loader到module.rules陣列中。

storybookBaseConfig.module.rules.push({
  test: /\.s?css$/,
  use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
  include: path.resolve(__dirname, '../'),
});
複製程式碼

2. storybook + Redux

其實元件可以分為2種，具體可以參照這篇文章

展示類，不涉及邏輯只關注樣式展示（Presentational）
邏輯類，關注邏輯而不涉及樣式展示（Container）

展示類

展示類的控制元件使用Storybook很簡單，根據展示類的控制元件傳入props即可。

邏輯類

在我的專案中通常為react-redux connect後的類。類中操作（如網路操作）都是通過redux進行的。為了讓這個類能正常測試執行，需要進行以下操作。（例子均為userStory）

在story檔案中引入react-redux的provider和store。

import { provider } from 'react-redux';
import store from 'store';
複製程式碼

擴充套件story
在storiesOf中增加裝飾器，裝飾器作用就是把story包裹起來。因此我們可以利用裝飾器的特點把store引入到控制元件中。

// stories/userStory/index.jsx
import React from 'react';
import { provider } from 'react-redux'
import { storiesOf } from '@storybook/react';
// 引入store
import store from 'store';
import BasicInfo from 'pages/clientDetail/components/BasicInfo';

storiesOf('使用者資訊', module)
  .addDecorator(storyFn => <Provider store={store}>{storyFn()}</Provider>)
  .add('基礎資訊', () => <BasicInfo />);
複製程式碼

mock資料
團隊搭建的yapi平臺負責mock資料生成。
whistle
由於mock資料和storybook不在同一個域，js呼叫mock資料會跨域，需要做請求轉發代理。我們團隊使用的是whistle。whistle是個好東西?，牆裂推薦！！！

以下是whistle配置的轉發規則。

//yourproject.com resCors://*
//localhost:8888 resCors://enable
//yourproject.com http://127.0.0.1:8888/  weinre://
# 9001是storybook的埠
# https://myapi.xxx.com 是yapi所在域名。
^localhost:9001/cgi-bin/** //myapi.xxx.com/mock/3876/cgi-bin/$1
複製程式碼

addons

什麼是addons，其實可以理解擴充套件storybook功能的外掛。

我使用到的addons有

addon-actions 用於展示事件處理函式接收到的資料
addon-console console輸出（log、error、warning）
addon-info 這個最有用了，如果控制元件填寫了proptype，直接就能顯示到storybook中。
addon-viewport 其實就是chrome的device toolbar功能。

注意
addon-actions和addon-viewport都需要在addons.js中註冊才能使用。

實踐

實踐程式碼

這個就是我的.storybook目錄結構。

.
├── README.md
├── addons.js
├── config.js
├── stories
│   └── userStory
│       └── index.js
└── webpack.config.js
複製程式碼

config.js

import { configure } from '@storybook/react';
import { setConsoleOptions } from '@storybook/addon-console';
import 'index.scss';

setConsoleOptions({
  panelExclude: [],
});

function loadStories() {
  require('./stories/userStory');
}

configure(loadStories, module);
複製程式碼

webpack.config.js

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules.push({
    test: /\.s?css$/,
    use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  storybookBaseConfig.module.rules.push({
    test: /\.(gif|png|jpe?g|eot|woff|ttf|pdf)$/,
    loader: 'file-loader',
  });

  // 設定別名
  storybookBaseConfig.resolve.alias = {
    antd: path.resolve(__dirname, '..', `node_modules/antd/dist/antd.min.js`),
    antdcss: path.resolve(__dirname, '..', 'node_modules/antd/dist/antd.min.css'),
    antdzhCN: path.resolve(__dirname, '..', 'node_modules/antd/lib/locale-provider/zh_CN.js'),
  };

  // 增加src為絕對路徑
  storybookBaseConfig.resolve.modules.push(path.resolve(__dirname, '..', 'src'));

  // 使用source-map
  storybookBaseConfig.devtool = 'source-map';

  storybookBaseConfig.mode = 'development';

  return storybookBaseConfig;
};
複製程式碼

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-viewport/register';
複製程式碼

action和viewport addon均需要在addons.js中註冊才能正常使用。

userStory

import React from 'react';
import { Provider } from 'react-redux';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withConsole } from '@storybook/addon-console';
import BasicInfo from 'pages/clientDetail/components/BasicInfo';
import KeyActionItem from 'pages/clientDetail/components/KeyAction/KeyActionItem';
import { withInfo } from '@storybook/addon-info';
import store from 'pages/clientDetail/store';
import zhCN from 'antdzhCN';
import { LocaleProvider } from 'antd';
import 'antdcss';

// redux結合
storiesOf('使用者資訊', module)
  .addDecorator(withInfo)
  .addDecorator((storyFn, context) => withConsole()(storyFn)(context))
  .addDecorator(storyFn => <Provider store={store}>{storyFn()}</Provider>)
  .addDecorator(storyFn => <LocaleProvider locale={zhCN}>{storyFn()}</LocaleProvider>)
  .add('基礎資訊', () => <BasicInfo />, {
    info: {
      text: `
        使用者基礎資訊展示，可進行上下翻頁。
      `,
    },
  });

storiesOf('行為軌跡item', module)
  .addDecorator(withInfo)
  .addDecorator((storyFn, context) => withConsole()(storyFn)(context))
  .add('行為軌跡item--課程顧問', () => (
    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '30px' }}>
      <KeyActionItem
        time="2018-12-12 12:12:12"
        user="testUser"
        role="課程顧問"
        type="saler"
        data={[{ title: '備註', content: '備註測試'}]}
        id={1}
        onClickDelete={action('onClickDelete')}
        canDelete
      />
    </div>
  ))
  .add('行為軌跡item--客戶', () => (
    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '30px' }}>
      <KeyActionItem
        time="2018-12-12 12:12:12"
        user="testUser"
        role="家長"
        type="client"
        data={[{ title: '購買記錄', content: '測試購買記錄'}]}
      />
    </div>
  ))
  .add('行為軌跡item--admin', () => (
    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '30px' }}>
      <KeyActionItem
        time="2018-12-12 12:12:12"
        user="admin"
        type="admin"
        data={[{ title: '購買記錄', content: '測試購買記錄'}]}
      />
    </div>
  ));
複製程式碼

實踐截圖

addons-info控制元件能把元件的prop資訊展示出來

結語

我在本文中介紹了最基本的storybook使用。

storybook配置
webpack配置
redux引入
addons介紹

文章中介紹的使用方式實在是很簡單，希望能安利更多人使用storybook。更多（高大上）storybook的實踐可以參考這裡 storybook實踐

參考

手把手教你mockjs實際專案快速搭建
2018-05-28
MockJS
手把手教你快速搭建React元件庫
2022-07-12
React元件
手把手教你利用開源專案搭建一個屬於自已的電商平臺
2021-12-16
手把手教你用Flutter搭建屬於自己的個人部落格
2021-05-12
Flutter
手把手教你搭建 Vue 服務端渲染專案
2020-11-02
Vue服務端
手把手實戰react + storybook元件庫
2018-05-22
React元件
手把手教你從零搭建深度學習專案（附連結）
2018-05-15
深度學習
手把手教你搭建mongodb副本集
2018-11-08
MongoDB
手把手教你搭建部落格
2022-03-24
手把手教你搭建 Ceph＋JuiceFS
2023-12-08
UI
手把手教你搭建Docker Registry私服
2018-05-31
Docker
手把手教你搭建自己的Angular元件庫
2020-05-14
Angular元件
手摸手教你用 Storybook 改善元件庫的開發
2019-05-11
元件
手把手教你搭建自己的Angular元件庫 - DevUI
2021-04-25
Angular元件devUI
「山禾說成長」：手把手教你搭建一個完全屬於自己的技術部落格
2020-07-08
[手把手教你] 1分鐘搭建Hyperf
2021-09-09
手把手教你搭建自己的深度學習機器
2017-05-02
深度學習
手把手教你搭建ffmpeg命令列環境
2020-02-17
命令列
手把手教你用vue搭建個人站
2019-02-16
Vue
手把手教你搭建一個 Elasticsearch 叢集
2018-10-17
Elasticsearch
手把手教你搭建SSH框架（Eclipse版）
2021-01-11
框架Eclipse
手把手教你從零開始搭建SpringBoot後端專案框架
2018-09-18
Spring Boot後端框架
手把手教你搭建自己的Raneto知識庫（二）
2021-08-03
手把手教你搭建AlphaZero（使用Python和Keras）
2018-03-09
PythonKeras
手把手教你快速構建自定義分類器
2018-08-07
小白快速上手搭建屬於自己的網站
2020-02-12
網站
手把手教你在IDEA搭建 SparkSQL的開發環境
2022-05-14
IdeaSparkSQL開發環境
手把手教你搭建一個灰度釋出環境
2020-03-31
手把手教你搭建Raneto知識庫框架（一）
2021-08-03
框架
手把手教你免費搭建 Shadowsocks 服務
2018-12-27
教你搭建基於typescript的vue專案
2018-09-23
TypeScriptVue
乾貨 | 手把手教你快速擼一個區塊鏈
2018-02-09
區塊鏈
手把手教你用 Nuget 管理自己的專案庫
2015-09-28
我是如何搭建個人專屬chatGPT的？
2023-04-11
ChatGPT
手把手教你搭建微信小程式伺服器（HTTPS）
2019-03-03
微信小程式伺服器HTTP
動態換ip軟體：手把手教你搭建Cookies池
2019-01-19
Cookie
手把手教你用Hexo搭建個人技術部落格
2018-03-30
Hexo
PS教程！手把手把教你建立超寫實的金屬質感沙漏
2015-09-09