Overview
今天科普一個(gè)有趣的前端開源工具——Stroybook匈子，一個(gè) UI 的可視化容器，可以視作組件庫的 wiki。
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
效果如下所示：左側(cè)組件導(dǎo)航；右側(cè)是組件細(xì)節(jié)，還可以做一些可視化操作留凭。
基本用法
我這里以 VUE 項(xiàng)目為例，簡(jiǎn)單介紹一下如何在項(xiàng)目里集成 storybook赌莺。
官方給出了一個(gè)極簡(jiǎn)的集成方法冰抢，只要在根目錄的命令行敲下如下一行就行了。（本文結(jié)束）
npx -p @storybook/cli sb init --type vue
如上自動(dòng)化集成方式太過精簡(jiǎn)艘狭，讓人不知所措挎扰，所以我還是介紹一下手工集成的方式翠订。
添加依賴
先在 devDependencies 里添加@storybook
yarn add @storybook/vue -D
官方文檔里還會(huì)要求我們添加許多額外的依賴，但是現(xiàn)代的 vue 項(xiàng)目基本是用 vue-cli 腳手架生成的遵倦，它已經(jīng)添加了足夠多的 dev 依賴尽超。一般來說是 storybook 的服務(wù)已經(jīng)可以直接啟動(dòng)了的，當(dāng)然之后顯示失敗的話也會(huì)提示你缺少了某幾個(gè)依賴梧躺，大家可以根據(jù)提示添加依賴似谁。 babel-preset-vue是最高頻的缺失，可能是這個(gè)庫好多年沒更新了掠哥，現(xiàn)在的腳手架已經(jīng)把它忘了巩踏。如果確實(shí)沒有，就照例添加即可续搀。
yarn add babel-preset-vue -D
創(chuàng)建 config.js 文件
storybook 自然也有配置文件塞琼，我們?cè)诟夸浝锝ㄒ粋€(gè).storybook/config.js文件。這里吐槽一下前端的配置文件禁舷，實(shí)在是太多太多了彪杉，根目錄里基本全是這類東西了。多到我們組里開發(fā)了一年多的小朋友牵咙，還沒認(rèn)清所有派近。
然后在該配置文件里寫上如下內(nèi)容：
// .storybook/config.js
import { configure } from '@storybook/vue';
configure(require.context('../src/components', true, /\.stories\.js$/), module);
配置挺直白的，就是讓 storybook 服務(wù)找到src/components文件夾下所有.stories.js結(jié)尾的文件洁桌。這里的每一個(gè) story渴丸，都會(huì)指向一個(gè) vue component，就把它當(dāng)做該組件的說明即可另凌。
寫一個(gè)組件
我們?cè)?src/components 下寫一個(gè)自己的組件——MyButton.vue曙强。
<!- MyButton.vue ->
<template>
<button class="button-style" @click="onClick">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'my-button',
methods: {
onClick() {
console.log('Hello World!');
},
},
}
</script>
<style scoped>
.button-style {
border-radius: 35% 10%;
color: #FFF;
background-color: #00bcd4;
font-size: 2em;
line-height: 1.2em;
margin: 1em 1em;
cursor: pointer;
}
</style>
組件很簡(jiǎn)單，就是封裝了原生 button tag：加了點(diǎn)樣式途茫，并且當(dāng)點(diǎn)擊它時(shí)控制臺(tái)能打出Hello World!
編寫 stories
stories 其實(shí)可以隨意放置，我這里就 follow 項(xiàng)目里 jest 的風(fēng)格溪食，把 stories 也放在了組件旁邊囊卜。
src/components
├── MyButton.vue
├── MyButton.stories.js
└── MyButton.spec.js
@story/vue，其實(shí)就是在 js 文件里寫了個(gè)無狀態(tài)的 vue 組件错沃，寫法也很簡(jiǎn)單：引用組件栅组，注冊(cè)組件，模版封裝枢析。結(jié)束玉掸！
// MyButton.stories.js
import MyButton from './MyButton.vue';
export default { title: 'My-Button' };
export const Component = () => ({
components: { MyButton },
template: '<my-button>my button</my-button>'
});
運(yùn)行 storybook
Storybook 的服務(wù)其實(shí)就是 webpack-dev-server，開發(fā)時(shí)可以熱加載醒叁，很方便編寫 stories 和 vue 組件本身司浪。我們給服務(wù)設(shè)置個(gè)端口泊业，比如 6006，開始運(yùn)行：
yarn start-storybook -p 6006
不出意外的話啊易，chrome 會(huì)自己打開localhost:6006吁伺。瀏覽器如下所示。左側(cè)列出了組件導(dǎo)航租谈，名字就是MyButton.stories.js的title篮奄；右側(cè)是真實(shí)組件的樣式，點(diǎn)擊后割去，@click事件觸發(fā)窟却，打印出Hello World!
如果你想打包成靜態(tài)資源發(fā)布，也很容易：
yarn build-storybook
默認(rèn)會(huì)在根目錄會(huì)創(chuàng)建一個(gè).out文件夾呻逆，里面就是所有靜態(tài)資源了夸赫。
插件系統(tǒng)
主線劇情就到此為止了，但是 storybook 遠(yuǎn)不止于此页慷，它自帶一種叫 addon 的插件系統(tǒng)憔足。（不要問我，addon 和 plugin 的區(qū)別）酒繁。
我們可以自己寫一個(gè)簡(jiǎn)單的 addon滓彰， 比如顯示組件父親的 border。
還記得上面的.storybook/config.js文件嗎州袒？我們的 addon 就是在里面調(diào)用addDecorator揭绑，給所有的 story 包一層div，并顯示 border：
//.storybook/config.js
import { configure, addDecorator } from '@storybook/vue';
configure(require.context('../src/components', true, /\.stories\.js$/), module);
addDecorator(() => ({
template:`
<div style="border:solid;">
<story/>
</div>`
}))
看一下結(jié)果郎哭，border 顯示出來了他匪。
當(dāng)然上面只是一個(gè)示例，現(xiàn)實(shí)意義不大夸研，我自己組里開發(fā)的時(shí)候用到 vuetify邦蜜，所以一般都會(huì)給所有控件包一層<v-app></v-app>，不然可能顯現(xiàn)不出 v 組件效果來亥至。
更多的時(shí)候悼沈，我們是直接集成社區(qū)里提供的 addon，比如@storybook/addon-knobs——用于調(diào)試 vue 的動(dòng)態(tài)變量姐扮。
還是一步一步來絮供，先裝個(gè)依賴：
yarn add @storybook/addon-knobs -D
接著在.storybook文件夾下創(chuàng)建addons.js文件，并引入依賴
// .storybook/addons.js
import '@storybook/addon-knobs/register';
然后啟動(dòng)服務(wù)茶敏，看到?jīng)]壤靶？下面多了個(gè)Knobs的 tab：
之后把 knobs 添加到每一個(gè) story 就可以了。我們稍許修改一下代碼惊搏，通過storiesOf形式注冊(cè) story：
// MyButton.sotries.js
import { storiesOf } from '@storybook/vue';
import { withKnobs, text } from '@storybook/addon-knobs';
import MyButton from './MyButton.vue';
const components = () => ({
components: { MyButton },
props: {
text: {
default: text('Text', 'my button')
}
},
template: `<MyButton>{{ text }}</MyButton>`
})
storiesOf('My-Button')
.add('components', components)
.addDecorator(withKnobs);
Knobs 根據(jù) story 的 props 生成 mock 數(shù)據(jù)贮乳，并雙向綁定對(duì)象組件的變量忧换，效果如下：
小結(jié)
這期科普了一個(gè)比較有趣的開發(fā)工具——Storybook，它可以很方便地幫助我們組織基礎(chǔ) UI 控件塘揣。不同的前端開發(fā)可以通過很直觀的方式復(fù)用對(duì)方的組件包雀，以期減少冗余代碼。此外亲铡，我個(gè)人覺得編寫 Story——可視化組件的最大意義還是在于可測(cè)試才写；我們組之前的組件業(yè)務(wù)侵入太重，組件本身很難編寫單元測(cè)試奖蔓，因此前端的測(cè)試覆蓋率一直非常低≡薏荩現(xiàn)在想想，可能是我們本身就寫錯(cuò)組件了吆鹤，組件并非頁面厨疙，應(yīng)該能獨(dú)立展示，不該包含太多業(yè)務(wù)疑务。我現(xiàn)在在項(xiàng)目里強(qiáng)制加入 Storybook 也是希望能改善之前的困局沾凄。
相關(guān)
文章同步發(fā)布于an-Onion的Github。碼字不易知允，歡迎點(diǎn)贊撒蟀。
