安装插件

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

自动安装

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

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

npx storybook@latest add @storybook/addon-a11y

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

手动安装

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

npx storybook@latest remove @storybook/addon-a11y