必备插件

Storybook 的一大优势在于 addons 插件，它扩展了 Storybook 的用户界面和行为。Storybook 默认包含一组“必备”插件，用于增强初始用户体验。除了 Storybook 核心团队开发的“官方”插件外，还有许多第三方插件。

¥A major strength of Storybook are addons that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.

集成

¥Installation

如果你运行 npx storybook@latest init 将 Storybook 集成到你的项目中，则最新版本的 Essentials 插件 (@storybook/addon-essentials) 已为你安装并配置完毕。你可以跳过本节的其余部分。

¥If you ran npx storybook@latest init to include Storybook in your project, the latest version of the Essentials addon (@storybook/addon-essentials) is already installed and configured for you. You can go ahead and skip the rest of this section.

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

¥However, if you intend to install the Essentials addon manually into an existing Storybook instance, you can do so by running the following command in your terminal:

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

更新 Storybook 配置（在 .storybook/main.js|ts 中）以包含 Essentials 插件。

¥Update your Storybook configuration (in .storybook/main.js|ts) to include the Essentials addon.

.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;

配置

¥Configuration

Essentials 为“零配置”。它附带一个开箱即用的推荐配置。

¥Essentials is "zero-config”. It comes with a recommended configuration out of the box.

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

¥If you need to reconfigure any of the individual Essentials addons, install them manually by following the installation instructions, and depending on the method of choice, register them in your Storybook configuration file (i.e., .storybook/main.js|ts) and adjust the configuration to suit your needs. For example:

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;

以下是每个插件所有可用选项的简化配置和表格。

¥Below is an abridged configuration and table with all the available options for each addon.

.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 时，你的自定义配置将覆盖默认配置。

¥When you start Storybook, your custom configuration will override the default.

禁用插件

¥Disabling addons

如果你需要禁用 Essential 的任何插件，你可以通过修改 .storybook/main.js 文件来实现。

¥If you need to disable any of the Essential's addons, you can do it by changing your .storybook/main.js file.

例如，如果你想禁用背景插件，你可以将以下更改应用于你的 Storybook 配置：

¥For example, if you wanted to disable the backgrounds addon, you would apply the following change to your Storybook configuration:

.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。

¥You can use the following keys for each individual addon: actions, backgrounds, controls, docs, viewport, toolbars, measure, outline, and highlight.