storybook在react环境下的基础搭建

1.安装

1.安装命令 npx storybook init.

PS:此命令必须在已有的项目中使用,在空项目下,无法初始化.

2.必要配置

2.配置 根路径别名 @;

在.storybook文件下新建文件 webpack.config.js

// 文件webpack.config.js

const path = require('path');
module.exports = (storybookBaseConfig, configType) => {
  const config = storybookBaseConfig.config;
  // 设置路径别名
  // 设置根路径别名
  config.resolve.alias['@'] = path.resolve(__dirname, '..', './src')
  // 设置antd别名
  config.resolve.alias['antd'] = path.resolve(__dirname, '..', `node_modules/antd`)
  // 还有其它插件,也需要将别名配置上
  return storybookBaseConfig.config;
};

在.storybook文件下修改文件 preview.js.

1.引入的逻辑: storybook只会以你的组件为入口,并不会从你的App.tsx为入口.

2.因此项目中从APP中引入的全局内容,都必须在此处重新引入一次.

3.此处引入antd的css样式.

// 文件preview.js
// 引入的逻辑: storybook只会以你的组件为入口,并不会从你的App.tsx为入口
// 因此项目中从APP中引入的全局内容,都必须在此处重新引入一次
// 此处引入antd的css样式.
import 'antd/dist/antd.css';

//以下是默认的内容,保持不变
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

完.