插件知识库

了解编写插件的基础知识后，有各种常见的增强功能可以使你的插件更好。此页面详细介绍了有关插件创建的其他信息。在创建自己的插件时将其用作快速参考指南。

¥Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons.

禁用插件面板

¥Disable the addon panel

可以禁用特定故事的插件面板。

¥It’s possible to disable the addon panel for a particular story.

为了实现这一点，你需要在注册面板时传递 paramKey 元素：

¥To make that possible, you need to pass the paramKey element when you register the panel:

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: () => <div>Addon tab content</div>,
    paramKey: 'myAddon', // this element
  });
});

然后在添加故事时，你可以传递禁用的参数。

¥Then when adding a story, you can pass a disabled parameter.

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/configure/#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Button',
  component: Button,
  parameters: {
    myAddon: { disable: true }, // Disables the addon
  },
};
 
export default meta;

设置插件样式

¥Style your addon

Storybook 使用 情感 进行样式设置。以及你可以自定义的主题！

¥Storybook uses Emotion for styling. Alongside with a theme that you can customize!

我们建议使用 Emotion 来设计插件的 UI 组件。这允许你使用活动的 Storybook 主题来提供无缝的开发者体验。如果你不想使用 Emotion，你可以使用内联样式或其他 css-in-js 库。你可以使用 Emotion 的 withTheme HOC 将主题作为属性接收。阅读有关主题的更多信息。

¥We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience. If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's withTheme HOC. Read more about theming.

Storybook 组件

¥Storybook components

插件作者可以使用任何 React 库开发他们的 UI。但我们建议在 @storybook/components 中使用 Storybook 的 UI 组件来更快地构建插件。当你使用 Storybook 组件时，你将获得：

¥Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in @storybook/components to build addons faster. When you use Storybook components, you get:

• 经过实战测试的现成组件

  ¥Battle-tested off-the-shelf components

• Storybook 原生外观和感觉

  ¥Storybook native look and feel

• 内置对 Storybook 主题的支持

  ¥Built-in support for Storybook theming

将下面列出的组件与你的下一个插件一起使用。

¥Use the components listed below with your next addon.

补充组件，还包括一组 UI 原语。使用下面列出的内容作为设计插件样式的参考。

¥Complementing the components, also included is a set of UI primitives. Use the content listed below as a reference for styling your addon.

构建系统

¥Build system

当你将插件开发为包时，你不能使用 npm link 将其添加到你的项目中。将你的插件作为本地依赖列到你的 package.json 中：

¥When you're developing your addon as a package, you can’t use npm link to add it to your project. List your addon as a local dependency into your package.json:

{
  "dependencies": {
    "@storybook/addon-controls": "file:///home/username/myrepo"
  }
}

热模块替换

¥Hot module replacement

在开发插件时，你可以配置 HMR（热模块替换）以反映所做的更改。

¥While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made.

独立 Storybook 插件

¥Standalone Storybook addons

如果你正在开发独立插件，请向 package.json 添加新脚本，内容如下：

¥If you're developing a standalone addon, add a new script to package.json with the following:

{
  "scripts": {
    "start": "npm run build -- --watch"
  }
}

本地 Storybook 插件

¥Local Storybook addons

如果你正在开发基于现有 Storybook 安装的本地 Storybook 插件，则可以使用 HMR（热模块替换）。

¥If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box.

在预设中编写插件

¥Composing addons in presets

如果你正在使用加载第三方插件的预设，而你无法控制这些插件，并且你需要访问某些功能（例如，装饰器）或提供其他配置。在这种情况下，你需要将预设更新为以下内容，以允许你加载和配置其他插件：

¥If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons:

function managerEntries(entry = []) {
  return [...entry, require.resolve('my-other-addon/register')];
}
 
const config = (entry = [], options) => {
  return [...entry, require.resolve('my-other-addon/addDecorator')];
};
 
export default {
  managerEntries,
  config,
};

如果你可以控制要自定义的插件。在这种情况下，你可以更新预设并实现自定义函数来加载任何其他预设并提供必要的配置，类似于在 基本要素 插件中实现的方式。

¥If you have control over the addons you want to customize. In that case, you can update your preset and implement a custom function to load any additional presets and provide the necessary configuration, similar to how it's implemented in the Essentials addon.