使用storybook维护，测试react, vue组件

[aototo]

维护，测试组件是一件比较麻烦的事情，必须有使用接口文档，还有开发组件过程中不断测试的问题。storybook是一个能解决这一切问题的好工具。

github storybook地址

1. 下载

   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