必要的插件

Storybook 的主要优势在于插件，这些插件扩展了 Storybook 的 UI 和行为。 Storybook 默认附带一组“必要的”插件，以增加初始用户体验。除了 Storybook 核心团队开发的“官方”插件外，还有许多第三方插件。

安装

如果您运行了 npx storybook@latest init 以在您的项目中包含 Storybook，则 Essentials 插件 (@storybook/addon-essentials) 的最新版本已为您安装和配置。您可以跳过本节的其余部分。

但是，如果您打算将 Essentials 插件手动安装到现有的 Storybook 实例中，则可以通过在终端中运行以下命令来完成

npm install @storybook/addon-essentials --save-dev

更新您的 Storybook 配置 (在 .storybook/main.js|ts 中) 以包含 Essentials 插件。

.storybook/main.ts

// 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)'],
  addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
};
 
export default config;

配置

Essentials 是“零配置”的。它开箱即用地提供了推荐的配置。

如果您需要重新配置任何单独的 Essentials 插件，请按照安装说明手动安装它们，并根据选择的方法，在您的 Storybook 配置文件（即 .storybook/main.js|ts）中注册它们，并调整配置以满足您的需求。例如

npm install @storybook/addon-actions --save-dev

.storybook/main.ts

// 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)'],
  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
};
 
export default config;

下面是一个简略的配置和表格，其中包含每个插件的所有可用选项。

.storybook/main.ts

// 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)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        csfPluginOptions: null,
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [],
          },
        },
      },
    },
    '@storybook/addon-controls',
    '@storybook/addon-backgrounds',
    '@storybook/addon-toolbars',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ],
};
 
export default config;

插件	选项	描述
`@storybook/addon-actions`	N/A	N/A
`@storybook/addon-viewport`	N/A	N/A
`@storybook/addon-docs`	`csfPluginOptions`	为 Storybook 的 CSF 插件提供额外的配置。可以使用 `null` 禁用。
	`mdxPluginOptions`	为 MDX 文档提供额外的配置选项和插件配置。
`@storybook/addon-controls`	N/A	N/A
`@storybook/addon-backgrounds`	N/A	N/A
`@storybook/addon-toolbars`	N/A	N/A
`@storybook/addon-measure`	N/A	N/A

当您启动 Storybook 时，您的自定义配置将覆盖默认配置。

禁用插件

如果您需要禁用任何 Essentials 插件，可以通过更改您的 .storybook/main.js 文件来完成。

例如，如果您想禁用 backgrounds 插件，您需要将以下更改应用于您的 Storybook 配置

.storybook/main.ts

// 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)'],
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false, // 👈 disable the backgrounds addon
      },
    },
  ],
};
 
export default config;

您可以为每个单独的插件使用以下键：actions、backgrounds、controls、docs、viewport、toolbars、measure、outline 和 highlight。