安装插件

Storybook 拥有数百个可重用的插件，它们被打包为 NPM 模块。让我们通过安装和注册插件来学习如何扩展 Storybook。

自动安装

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

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

npx storybook@latest add @storybook/addon-a11y

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

手动安装

Storybook 插件始终通过 `.storybook/main.js|ts` 文件中的 addons 配置数组进行添加。以下示例展示了如何手动将辅助功能插件添加到 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 中移除辅助功能插件，请运行以下命令

npx storybook@latest remove @storybook/addon-a11y