storybook是一套最近比較火的響應(yīng)式UI 開(kāi)發(fā)及測(cè)試環(huán)境。
可以可視化開(kāi)發(fā)調(diào)試react木西，vue組件
官網(wǎng)：https://github.com/storybooks/storybook
至于為什么叫storybook畴栖，應(yīng)該是敏捷開(kāi)發(fā)中的user story有關(guān)，找了篇 文章八千，不了解的同學(xué)可以看下
根據(jù)官網(wǎng)介紹一個(gè)story是一個(gè)或多個(gè)UI組件的單一狀態(tài)驶臊，基本上像一個(gè)可視化測(cè)試用例挪挤。
打開(kāi) 這個(gè)，這是airbnb公司實(shí)現(xiàn)的一個(gè)react的datepicker組件关翎。這個(gè)組件配置很多，怎么讓大家直觀的查看學(xué)習(xí)呢鸠信？他就利用storybook寫(xiě)了很多story纵寝，左側(cè)的每一項(xiàng)點(diǎn)開(kāi)后是datepicker組件不同的狀態(tài)或配置，就是一個(gè)個(gè)story星立。
storybook本身提供了很多組件爽茴，也可以添加自己的組件作為story，方便他人查看绰垂，使用并測(cè)試室奏。
使用storybook你需要有react或vue的開(kāi)發(fā)經(jīng)驗(yàn)，并且熟悉es6劲装。
下來(lái)帶大家簡(jiǎn)單使用一下：
- 首先全局安裝storybook命令：
npm i -g @storybook/cli -
來(lái)到一個(gè)已存在的react項(xiàng)目胧沫，可以是由creat-react-app創(chuàng)建的
在根目錄執(zhí)行 getstorybook 命令
會(huì)出現(xiàn)如下畫(huà)面
安裝storybook
發(fā)現(xiàn)這個(gè)命令實(shí)際修改了package.json，對(duì)比如下
然后又多出來(lái)個(gè)名為.storybook的目錄占业，里面有附件組件文件 addons.js 和 config.js
-
安裝后根據(jù)提示執(zhí)行
yarn run storybook啟動(dòng)storybook服務(wù)绒怨，瀏覽器打開(kāi) http://localhost:9009
image.png 這個(gè)頁(yè)面是咋生成的呢，我們打開(kāi)
\src\stories\index.js一看便知
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
// 文檔 https://storybook.js.org/basics/writing-stories/
// storiesOf應(yīng)該是分組谦疾，每組添加一個(gè)個(gè)story
// 修改內(nèi)容頁(yè)面會(huì)實(shí)時(shí)發(fā)生變化
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
// 使用action讓storybook去記錄log,可以在頁(yè)面的action logger中查看
storiesOf('Button', module)
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => <Button onClick={action('clicked')}>?? ?? ?? ??</Button>);
今天就先研究到這里
