storybook中剔除chakra-ui的影响，或者剔除其他ui包的影响

news2024/9/26 3:28:20

介绍

经过一系列初始化完成后，storybook项目启动出来发现多余了一个ui框架的内容。如下图
因为项目中仅仅使用chakraUI的一些功能，并没有使用整体组件功能，所以说完全没必要把它留着这里。
经过排查可以使用storybook中的refs功能剔除掉不需要的chakraui框架组件介绍如下代码
（位置：/.storybook/main.ts）

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    '@chakra-ui/react': { disable: true },
  },
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['..\\public'],
};
export default config;

主要代码：

  refs: {
    '@chakra-ui/react': { disable: true },
  },

更改完上述代码后重新启动项目即可。如下（干干净净最好）
如果有其他ui框架或者其他包影响到了都可以使用refs这个去配置
其他包：
一些包依赖会自动将它们的Storybook组合到您的Storybook中。
您可以通过将包名称的disable设置为true来禁用此行为:

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    'package-name': { disable: true },
  },
};
 
export default config;