安装插件

Storybook 将数百个可重复使用的插件打包为 NPM 模块。让我们了解如何通过安装和注册插件来扩展 Storybook。

¥Storybook has hundreds of reusable addons packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.

自动安装

¥Automatic installation

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

¥Storybook includes a storybook add command to automate the setup of addons. Several community-led addons can be added using this command, except for preset addons. We encourage you to read the addon's documentation to learn more about its installation process.

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

¥Run the storybook add command using your chosen package manager, and the CLI will update your Storybook configuration to include the addon and install any necessary dependencies.

npx storybook@latest add @storybook/addon-a11y

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

¥If you're attempting to install multiple addons at once, it will only install the first addon that was specified. This is a known limitation of the current implementation and will be addressed in a future release.

手动安装

¥Manual installation

Storybook 插件始终通过 .storybook/main.js|ts 中的 addons 配置数组添加。以下示例显示如何手动将可访问性插件添加到 Storybook。

¥Storybook addons are always added through the addons configuration array in .storybook/main.js|ts. The following example shows how to manually add the Accessibility addon to Storybook.

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

¥Run the following command with your package manager of choice to install the addon.

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

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

¥Next, update .storybook/main.js|ts to the following:

.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 时，可访问性测试插件将被启用。

¥When you run Storybook, the accessibility testing addon will be enabled.

Storybook addon installed and registered

删除插件

¥Removing addons

要从 Storybook 中删除插件，你可以选择手动卸载它并将其从配置文件中删除（即 .storybook/main.js|ts），或者选择通过 CLI 使用 remove 命令自动执行此操作。例如，要使用 CLI 从 Storybook 中删除可访问性插件，请运行以下命令：

¥To remove an addon from Storybook, you can choose to manually uninstall it and remove it from the configuration file (i.e., .storybook/main.js|ts) or opt-in to do it automatically via the CLI with the remove command. For example, to remove the Accessibility addon from Storybook with the CLI, run the following command:

npx storybook@latest remove @storybook/addon-a11y