使用storybook维护，测试react, vue组件 #24
Description
维护，测试组件是一件比较麻烦的事情，必须有使用接口文档，还有开发组件过程中不断测试的问题。storybook是一个能解决这一切问题的好工具。
github storybook地址
- 下载
cd my-react-app
npx -p @storybook/cli sb init
会在项目根目录出现几个文件夹
.storybook
stories
需要在.storybook 文件夹下 创建webpack.config.js 去新建loader 插件加载less 资源文件等
const path = require("path");
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
storybookBaseConfig.module.rules.push({
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"],
include: path.resolve(__dirname, "../")
});
storybookBaseConfig.module.rules.push({
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
include: path.resolve(__dirname, "../")
});
storybookBaseConfig.module.rules.push({
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
loader: 'url-loader',
include: path.resolve(__dirname, "../")
});
return storybookBaseConfig;
};
./stories/index.stories.js 文件添加组件
具体内容如下
https://storybook.js.org/basics/writing-stories/
插件添加
storybook 有许多可以用的插件比如notes ，还可以支持markdown 文件导入
notes 文档写的很清楚了
需要在.storybook 文件夹下 创建插件模块，导入使用
全局的style css 需要自己引入，这点比较麻烦。需要添加配置的在
./.storybook/webpack.config.js
修改添加就可以了
推荐插件 markdown