安装附加组件

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

自动安装

Storybook 包含一个 storybook add 命令，用于自动化附加组件的设置。可以使用此命令添加多个社区驱动的附加组件，但预设附加组件除外。我们鼓励您阅读附加组件的文档以详细了解其安装过程。

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

npx storybook@latest add @storybook/addon-a11y

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

手动安装

Storybook 附加组件始终通过 addons 配置数组添加到 .storybook/main.js|ts 中。以下示例展示了如何手动将无障碍测试附加组件添加到 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-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: [
    // 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