手摸手教你用 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 关注公众号

转载请注明出处