手摸手教你用 Storybook 改善組件庫的開發

在上一篇文章 《手摸手教你封裝跨項目複用的 Vue 組件》 中，介紹了一例用 rollup.js 封裝 Vue.js 組件庫的實踐；限於篇幅和複雜度，其中組件的即時調試預覽部分，也一樣採用了 rollup 一併配置出來，雖然徹底夠用，但運行起來稍嫌麻煩，bigger 上感受也差強人意。

本篇的內容就是嘗試優化這部分的開發體驗，用業界成熟的解決方案 Storybook 解決組件的統一展現和事實調試。

更快更強的構建 UI 組件
Storybook 是一個爲開發獨立的 React、Vue 和 Angular UI 組件的開源工具。高效有序地構建炫酷用戶界面

以上是官網開宗明義的介紹，總之在 React 等領域，Storybook 已經很好的證實了本身，引入這個工具之後，即使是在普通的項目中，也能幫助開發者逐漸打理出各類低耦合的可複用組件；若是搭配 Lerna 等工具，甚至直接把組件分別發佈到 npm 上也能安排的妥妥的。

由於是承接上一篇的內容，因此本文就不展開介紹 Storybook 的種種細節，反正用它作的事情和咱們以前已經作過的是同樣的：實時編譯調試、手動測試運行。

基於以前的項目，直接說明改動步驟。

首先，引入 Storybook 後項目結構將微調成這樣：

├─.babelrc
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─jest.config.js
├─package.json
├─postcss.config.js
├─rollup.config.js
├─CHANGELOG.md
├─README.md
├─dist/
├─node_modules/
├─src/
├─.storybook/
├─storybook-static/
├─__mocks__/
└─__tests__/
複製代碼

其中，可見如下兩個文件夾：

├─.storybook/
├─storybook-static/
複製代碼

分別用來存放配置和生成的靜態預覽頁面。

要設置 Storybook 環境，須要先安裝必要的依賴：

npm install @storybook/vue --save-dev
npm install vue-loader style-loader css-loader sass-loader node-sass --save-dev
複製代碼

執行初始化:

npx -p @storybook/cli sb init --type vue
複製代碼

此時會自動增長兩個 npm scripts：

"scripts": {
    ...
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},
複製代碼

刪除默認生成的文件夾：

rm -rf ./stories/
複製代碼

修改 .storybook/config.js 中的相應配置，直接把 .stories.js 文件和對應的組件源碼放在一塊兒：

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

...
複製代碼

一樣在以上文件中，作一些和項目中 main.js 類似的初始化工做：

// .storybook/webpack.config.js

import 'normalize.css';
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element);

...
複製代碼

爲了正確解析 Vue 單文件組件中的樣式部分，修改設置：

// .storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.scss$/,
    include: path.resolve(__dirname, '../src'),
    use: ['style-loader', 'css-loader', 'sass-loader'],
  });
  return config;
};
複製代碼

在 .storybook/preview-head.html 中引入必要的樣式等，項目中的相似工做多是在 index.html 等處完成的：

<link rel="stylesheet" href="//foo/bar/index.css">
複製代碼

接下來就是動手編寫各類組件的 story 用例，好比：

// src\projectA\components\HorizentalRadios.stories.js

import { storiesOf } from '@storybook/vue';
import HorizentalRadios from './HorizentalRadios';

storiesOf('projectA|超過個數變成下拉的raidos', module)
  .add('列表少於預期個數時', () => ({
    components: { HorizentalRadios },
    template: `<horizental-radios v-model="value" @change="valueChange" :max-shown-count="3" :items="items" item-label="label" item-name="name" more-label="更多的呢" :list-style="false" />`,
    data() {
      return {
        value: 'aaa',
        items: [{
          label: 'aaa',
          name: 'name1'
        }, {
          label: 'bbb',
          name: 'name2'
        }],
      };
    },
    methods: {
      valueChange() {
        console.log(this.value);
      },
    },
  }))
  .add('列表多於預期個數時+列表主題色', () => ({
    components: { HorizentalRadios },
    template: `<horizental-radios v-model="value" @change="valueChange" :max-shown-count="3" :items="items" item-label="label" item-name="name" more-label="更多的呢" :list-style="true" />`,
    data() {
      return {
        value: 'aaa',
        items: [{
          label: 'aaa',
          name: 'name1'
        }, {
          label: 'bbb',
          name: 'name2'
        }, {
          label: 'ccc',
          name: 'name3'
        }, {
          label: 'ddd',
          name: 'name4'
        }, {
          label: 'eee',
          name: 'name5'
        }, {
          label: 'fff',
          name: 'name6'
        }],
      };
    },
    methods: {
      valueChange() {
        console.log(this.value);
      },
    },
  }))
複製代碼

可見對同一個組件，能夠 add 多個用例，這點和單元測試時的作法很類似；

同時 storiesOf() 相似於單元測試的 describe() 部分，而且其第一個參數能夠用 | 分割，表示層級。

運行 npm run storybook 查看效果：

最後發佈前不要忘記 npm run storybook，生成靜態頁面，以便其餘開發者能夠直接運行查看。

--End--

搜索 fewelife 關注公衆號

轉載請註明出處