在上一篇文章 《手摸手教你封装跨项目复用的 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 关注公众号
转载请注明出处
