腦袋疼的react組件可視化

時間 2019-11-07

標籤腦袋 react 組件可視化欄目 React 简体版

原文原文鏈接

想搞個組件可視化好久了，一開始就是想作個和antd相似的，而後就遇到了一系列的問題javascript

組件可視化的目的：css

歷史組件可感知，可以作到信息同步
可以改變開發流程，可以提早進行組件的視覺驗收
便於後期的視覺規範統一

Q1：如何搞個和antd相似的組件庫？

調研發現，antd使用的是阿里系的bisheng這個包vue

Q2：bisheng的解決的問題是？

目的是將markdown轉成靜態站點，antd就是這樣產生的java

Q3：bisheng存在的問題？

好久無人維護，文檔更新等都比較滯後
且文檔比較難讀，上手比較麻煩

Q4：除了bisheng市面上還有什麼解決方案？

這就是本次要說的storybook了，目前3.7w個star，且生態比較好，插件也很多react

Q5：storybook怎麼上手？

step1：安裝依賴

npm init -y
npm install @storybook/react --save-dev
npm install react react-dom --save
npm install babel-loader @babel/core --save-dev 
複製代碼

step2：添加script腳本

在package.json中添加webpack

{
 "scripts": {
   "storybook": "start-storybook"
 }
}
複製代碼

step3：添加config文件

建立.storybook/config.js文件git

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

function loadStories() {
  require('../stories/index.js');
  // 能夠添加多個store
  // You can require as many stories as you need.
}

configure(loadStories, module);
複製代碼

step4：開始寫story

建立../stories/index.js文件github

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">😀 😎 👍 💯</span></Button>
  )); 
複製代碼

step5：跑起來

npm run storybook
複製代碼

效果

ok，成功搞定，已經可以看到編寫的代碼了

總結：storybook按照配置，跑起來仍是比較輕鬆的

Q6：如何設計目錄結構？

官方提供了三種，我選擇了我的認爲比較清晰的方式
web

button.js是組件代碼
button.stories.js是故事代碼

按照上面的設計估計應該就可以知足咱們的需求了chrome

Q7：如何按需加載？

只是簡單配置可不行，若是不在一開始就搞好的話，隨着後面業務的擴展會帶來不少問題，像按需加載這種功能仍是一開始就設計比如較好

修改.storybook/config.js

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

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
複製代碼

Q8：storybook插件是什麼？

前面有了組件庫展現，但距離可查看api、可測試、可調整樣式等差距還很大
這些額外的功能就須要添加依賴來解決了
在storybook中插件概念叫作 addons

Q9：啥是addons？

addons是添加的意思
在storybook則用來將其用做表示增長的功能

**
重要的事情說三遍：

在.storybook配置文件中，添加一個addons.js文件
**在.storybook配置文件中，添加一個addons.js文件
**在.storybook配置文件中，添加一個addons.js文件

addons.js文件是用來維護插件的配置文件

Q10：如何體驗第一個addons？

官網上Addons目錄就是官方推薦的插件列表，開始一個個嘗試

Q11：什麼是addons-knobs？

這個可就牛逼了，knobs主要是用來提供動態調整交互的能力，實踐一下

step1：安裝依賴

npm i @storybook/addon-knobs -D 
複製代碼

step2：添加配置項

找到.storybook/addons.js在其中添加一句話

import '@storybook/addon-knobs/register';
複製代碼

step3：修改已有的stories

按照github地址，添加示例代碼

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

const stories = storiesOf('Storybook Knobs', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);

// Knobs for React props
stories.add('button', () => (
  <button disabled={boolean('不可用', false)} > {text('文案', '牛逼的knobs')} </button>
));

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
  const name = text('Name', 'Arunoda Susiripala');
  const age = number('Age', 89);

  const content = `I am ${name} and I'm ${age} years old.`;
  return (<div>{content}</div>);
});
複製代碼

上面一共作了幾件事情：

在stories上添加了一個修飾器
在button上添加了對屬性的包裝，例如text()、boolean()等至關於對屬性進行了綁定

直接看效果

step4：雙向綁定效果

能夠看到，咱們訂閱的兩個數據類型已經顯示在了Knobs中了，此時修改內容，組件內容也隨之改變

step5：計算屬性

上面例子中，第二個case，包含計算變量

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
  const name = text('Name', 'Arunoda Susiripala');
  const age = number('Age', 89);

  const content = `I am ${name} and I'm ${age} years old.`;
  return (<div>{content}</div>);
});
複製代碼

當修改age後，也會從新渲染

Knobs極其強大：

這個計算屬性，很像vue中的computed屬性，當數據改變便可以改變交互
同時也能夠快速驗證多種狀態
也能夠快速驗證邊界狀況

Q12：什麼是addons-actions

Actions用來獲取用戶點擊信息，這個具體使用暫時沒太想到場景，看了demo，目前是用來區分具體點擊的位置

step1：安裝依賴

npm i -D @storybook/addon-actions
複製代碼

step2：修改.storybook/addons.js

import '@storybook/addon-actions/register';
複製代碼

step3：綁定單個事件

import { storiesOf } from '@storybook/react';
import { action, configureActions } from '@storybook/addon-actions';

import Button from './button';

storiesOf('Button', module).add('default view', () => (
  <Button onClick={action('button-click')}>Hello World!</Button>
));
複製代碼

step4：綁定多個事件

import { storiesOf } from '@storybook/react';
import { actions } from '@storybook/addon-actions';

import Button from './button';

// This will lead to { onClick: action('onClick'), ... }
const eventsFromNames = actions('onClick', 'onMouseOver');

// This will lead to { onClick: action('clicked'), ... }
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });

storiesOf('Button', module)
  .add('default view', () => <Button {...eventsFromNames}>Hello World!</Button>)
  .add('default view, different actions', () => (
    <Button {...eventsFromObject}>Hello World!</Button>
  ));
複製代碼

Q13：什麼是addons-storysouce

這個理解起來仍是相對簡單的，目的就是在控制檯中顯示故事源

step1：安裝依賴

npm i  @storybook/addon-storysource --dev
複製代碼

step2：建立webpack.config.js

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  return config;
};
複製代碼

這個和前面兩個插件不一樣之處就在這，它須要在webpack中添加一個loader，經過storybook自己的webpack對外暴露，對其添加插件

step3: 查看源碼效果

Q14：什麼是addon-info？

這個info插件也十分強大，可以快速將組件中的配置信息，轉換成markdown可閱讀模式中組件信息

step1：安裝依賴

npm i -D @storybook/addon-info
複製代碼

step2：添加插件

addon-info採用的是修飾器模式，能夠全局添加，也能夠局部添加

全局修飾就是在config中全局添加

addDecorator(withInfo); // Globally in your .storybook/config.js.
複製代碼

局部修飾的花，就在stories中添加

storiesOf('Component', module)
  .addDecorator(withInfo) // At your stories directly.
  .add(...);
複製代碼

step3：在組件代碼中添加propTypes

import React from 'react';
import PropTypes from 'prop-types';
const Test = (props)=><div>{props.children}</div>
Test.propTypes = {
  text: PropTypes.string.isRequired,
  onDelete: PropTypes.func,
}
export default Test
複製代碼

添加addons-info插件後，就會增長showinfo按鈕

點擊showinfo，就可見

自動將組件名稱轉爲了markdown
自動將組件代碼轉爲了markdown
自動將propsTypes轉爲了表格

不過表格中的信息仍是有丟失，缺乏默認值、描述

step4：在組件代碼中添加默認值、描述

import React from 'react';
import PropTypes from 'prop-types';
const Test = (props)=><div>{props.children}</div>
Test.defaultProps = {
  text: '默認值',
  onDelete: () => {}
};
Test.propTypes = {
   /** 這裏text是註釋 */
  text: PropTypes.string.isRequired,
  /** 這裏onDelete是註釋 */
  onDelete: PropTypes.func,
}
export default Test
複製代碼

默認值經過defaultProps設置
註釋經過在屬性上添加註釋來實現

Q15：什麼是addon-viewport？

viewport你們都很熟悉，這個就是用來搞移動端的

step1：安裝依賴

npm i --save-dev @storybook/addon-viewport
複製代碼

step2：註冊插件

在.storyboos/config中註冊

import '@storybook/addon-viewport/register';
複製代碼

step3：全局添加

import React from 'react';
import { configure,addDecorator,addParameters } from '@storybook/react';
// config.js
import { withInfo } from '@storybook/addon-info';
addDecorator(withInfo);
addParameters({
  viewport: { defaultViewport: 'iphone6' },
});

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
複製代碼

這裏就是使用addParameters方法，很方便就能夠

這樣默認就有了一批viewpoint，這一塊具體配置，就慢慢讀文檔就行了

Q16：什麼是addons-shots

這部分是測試用例相關，短期內啃不下來，待後面有時間再補充

Q17：什麼是addon-backgrounds

這個主要是用來設置背景色，非必須，無關緊要

Q18：什麼是addon-a11y

這個至關與lint類的功能，在實際項目中仍是頗有用的

step1：安裝依賴

npm i @storybook/addon-a11y --dev
複製代碼

step2：註冊插件

修改addons

import '@storybook/addon-a11y/register';
複製代碼

step3：添加修飾器和參數

在config文件中添加

addDecorator(withA11y);
addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
    config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  },
});

複製代碼

ok，這樣的話，若是書寫不符合規範的按鈕，則會報錯