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

時間  2019-11-06
標籤 手把手 快速 搭建 專屬 storybook 简体版
原文   原文鏈接

什麼是Storybook

Storybook是一個輔助UI控件開發的工具。經過story建立獨立的控件，讓每一個控件開發都有一個獨立的開發調試環境。 Storybook的運行不依賴於項目，開發人員不用擔憂因爲開發環境、依賴問題致使不能開發控件。javascript

Storybook支持的框架覆蓋主流的框架（React、Vue、Angular）。 因爲使用React做爲技術棧，本文將介紹使用react的項目如何配置Storybook環境。css

安裝

  1. 全局安裝Storybook
npm i -g storybook
複製代碼
  1. 執行如下命令安裝@storybook/react
npm i --save-dev @storybook/react
複製代碼
  1. 在package.json文件中
{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}
複製代碼

  1. 在工程根目錄建立.storybook目錄java

  2. 在.storybook目錄下建立config.js文件node

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

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

configure(loadStories, module);
複製代碼
  1. 建立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配置。react

storybook 配置

1. 自定義webpack配置

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

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

有時候默認的webpack配置不能知足咱們的項目，所以須要對webpack配置進行擴展。git

一般我使用的是Full Control Mode對webpack配置進行修改。首先在.storybook目錄下增長webpack.config.js文件github

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：默認配置失效web

若是使用自定義的配置，默認配置就會失效，若是沒有從新配置file-loader，storybook運行起來時候假若有控件引用了圖片等文件會報錯。chrome

// 默認配置會失效，處理文件須要配置相應的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）

  1. 在story文件中引入react-redux的provider和store。
import { provider } from 'react-redux';
import store from 'store';
複製代碼
  1. 擴展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 />);
複製代碼

  1. mock數據
    團隊搭建的yapi平臺負責mock數據生成。

  2. 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使用。

  1. storybook配置
  2. webpack配置
  3. redux引入
  4. addons介紹

文章中介紹的使用方式實在是很簡單，但願能安利更多人使用storybook。更多（高大上）storybook的實踐能夠參考這裏 storybook實踐

參考

  1. Storybook官網
  2. StoryBook meets redux
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程