Storybook 是一个用于独立构建 UI 组件和页面的前端开源工具，无需繁琐的工作即可构建 UI。前段时间刚刚发布了7.x版本，文本将简单介绍下其在webpack5和vite中的使用步骤。

关于什么是storybook，可以看官方介绍：storybook.js.org/docs/react/…

安装

需要有已经install过的项目，比如准备一个基于webpack5/vite4.x的react-ts项目

npx storybook@latest init

初始化安装过程很简单，因为cli会自动探测您的项目类型，如下图：
install后会自动通过"storybook": "storybook dev -p 6006"启动storybook dev，截图如下:

`

7.x版本还为用户添加了智能引导弹框，可以点击蓝色按钮即可观看版块功能介绍。

我们可以根据智能向导，在src/stories/button.stories.tsx文件末尾添加warning类型的按钮
```
export const Warning: Story = {
  args: {
    primary: true,
    label: 'Delete now',
    backgroundColor: 'red',
  }
};
```
添加成功会有彩蛋

其他功能介绍

npm run storybook之后可以点击configure-your-project--docs查看, 每个功能都有查看详情，如下：

配置修改

比如添加alias配置

webpack5

需要扩展webpackFinal，当然也可以追加其他webpack配置

import type { StorybookConfig } from '@storybook/react-webpack5';





const config: StorybookConfig = {


  // ...


  webpackFinal: async (config) => {
    if (config.resolve && config.resolve.alias) {
      config.resolve.alias['@'] = resolve('../src');
      config.resolve.alias['@assets'] = resolve('../src/assets');
      // ...
    }

    return config;
  },
};


export default config;

webpack5 ant-mobile集成

我们可以修改.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';





const config: StorybookConfig = {


  // ...


  babel: async (options) => {
    return {
      ...options,
      plugins: [ // 动态导入antd-mobile
        [
          require.resolve('babel-plugin-import'),
          {
            libraryName: 'antd-mobile',
            libraryDirectory: 'es/components',
            style: false,
          },
        ],
      ],
    };
  },
};

export default config;

webpack5 less/sass支持

vite不用单独配置，直接安装less/sass包即可

安装 @storybook/addon-styling

npm i @storybook/addon-styling -D

import type { StorybookConfig } from '@storybook/react-webpack5';





const config: StorybookConfig = {


  // ...


  addons: [
    // ...
    {
      name: '@storybook/addon-styling',
      options: {
        // less 支持
        less: {
          implementation: require('less'),
        },
        // sass/scss 支持
        sass: {
          implementation: require('sass'),
        },
        // postcss 支持
        postCss: {
          implementation: require("postcss"),
        },
      },

    },
  ],
  // ...
};


export default config;

vite

vite-storybook相对webpack5-storybook来说比较智能，会自动继承vite.config.ts中的配置 (注意storybook v6需要通过viteFinal进行额外配置)
如果项目中安装过less sass包，那么storybook会自动支持，开箱即用 (注意：wepbpack依然需要单独配置，详见wepack5-less/sass支持)

并且你依然可以继续扩展viteFinal

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import path from 'path';

const config: StorybookConfig = {
  // ...
  async viteFinal(config, { configType }) {
    // const isBuild = configType !== 'DEVELOPMENT';

    return mergeConfig(config, {
      resolve: {
        alias: [
          ...(
            Object.entries({
              'classnames': 'classnames-es-ts',
              '@': path.resolve('src'),
              '@components': path.resolve('src/components'),
              // ...
            }).map(([key, val]) => ({ find: key, replacement: val }))
          ),
        ],
      },

      // ...
    });
  },

};




export default config;

vite ant-mobile集成

直接在vite.config.ts中添加即可

关于px to rem后页面显示问题

如果您的项目使用了postcss-plugin-px2rem插件, storybook预览后，元素或字体显示会变小，如下图所示：

这是因为所有的px被转成了rem，而文档默认base是16px，所以会自动缩小

处理方法：

创建.storybook/preview-body.html

以下的转换只是案例 (我的例子是适配移动端)，具体可以根据需求进行调整

<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        const base = 100;
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
          docEl.style.fontSize = `${base}px`;
        } else {
          docEl.style.fontSize = base * (clientWidth / 750) + 'px';
        }
      };


    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>

刷新页面即可

预览机型添加

我的场景是适配移动端，比如我们添加一些常用机型，如iphone5

修改.storybook/preview.ts即可

import type { Preview } from '@storybook/react';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

const customViewports = {
  pixel2: {
    name: 'Pixel 2',
    styles: {
      width: '411px',
      height: '731px',
    },
  },
  iphone5: {
    name: 'iPhone 5/SE',
    styles: {
      width: '320px',
      height: '568px',
    },
  },
  iphone678: {
    name: 'iPhone 6/7/8',
    styles: {
      width: '375px',
      height: '667px',
    },
  },

};




const preview: Preview = {
  parameters: {
    padded: false,
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    viewport: {
      viewports: {
        ...MINIMAL_VIEWPORTS,
        ...customViewports,
      },
    },
  },
};

export default preview;