安装插件

Storybook 拥有数百个可重用插件，它们以 NPM 模块的形式打包。让我们逐步了解如何通过安装和注册插件来扩展 Storybook。

自动安装

Storybook 包含一个 storybook add 命令，用于自动化插件的设置。除了预设插件，可以使用此命令添加许多社区主导的插件。我们鼓励您阅读插件的文档，以了解其安装过程的更多信息。

使用您选择的包管理器运行 storybook add 命令，CLI 将更新您的 Storybook 配置以包含该插件并安装所有必要的依赖项。

npx storybook@latest add @storybook/addon-a11y

如果您尝试一次安装多个插件，它将只安装指定的第一个插件。这是当前实现的一个已知限制，将在未来的版本中解决。

手动安装

Storybook 插件总是通过 .storybook/main.js|ts 中的 addons 配置数组添加。以下示例展示了如何手动将Accessibility 插件添加到 Storybook。

使用您选择的包管理器运行以下命令来安装该插件。

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

接下来，将 .storybook/main.js|ts 更新为以下内容

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
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: [
    // Other Storybook addons
    '@storybook/addon-a11y', //👈 The a11y addon goes here
  ],
};
 
export default config;

当您运行 Storybook 时，可访问性测试插件将被启用。

Storybook addon installed and registered

移除插件

要从 Storybook 中移除插件，您可以选择手动卸载并从配置文件（即 .storybook/main.js|ts）中移除它，或者通过 CLI 使用 remove 命令自动完成。例如，要使用 CLI 从 Storybook 中移除Accessibility 插件，请运行以下命令：

npx storybook@latest remove @storybook/addon-a11y