Storybook 插件

Storybook 的一个主要优势是它的可扩展性。使用插件扩展和自定义 Storybook 以适合你团队的开发工作流程。

¥A key strength of Storybook is its extensibility. Use addons to extend and customize Storybook to fit your team’s development workflow.

插件是 Storybook 工作方式不可或缺的一部分。Storybook 的许多核心功能都是作为插件实现的！这些插件是随 essentials 开箱即用的。

¥Addons are integral to the way Storybook works. Many of Storybook's core features are implemented as addons! These addons are installed out of the box with essentials.

插件功能

¥Addon features

Storybook 中插件影响最明显的事情是 Storybook 本身的 UI。在 UI 中，工具栏和插件面板是插件出现的两个主要位置。

¥The most obvious thing addons affect in Storybook is the UI of Storybook itself. Within the UI the toolbar and addons panel are the two chief places addons will appear.

插件还可以通过注入自己的 decorators 来加入预览窗格中故事的渲染。

¥Addons can also hook into the rendering of your story in the preview pane via injecting their own decorators.

最后，插件可以通过注入自己的 webpack 配置来影响 Storybook 的构建设置，以允许在 Storybook 中使用其他工具。仅执行此操作的插件通常称为 presets。

¥Finally, addons can affect the build setup of Storybook by injecting their own webpack configuration to allow the use of other tools in Storybook. Addons that do only this are often referred to as presets.

基本、核心和社区插件

¥Essential, core and community addons

Storybook 插件有很多，但它们大致可以分为三个字段：

¥There are many, many Storybook addons, but they can be roughly categorized into three areas:

• 基本插件是核心团队开发的插件，被视为开箱即用的用户体验的一部分。这些默认随新的 Storybook 安装一起提供。

  ¥Essential addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.

• 核心插件由核心团队开发。它们与 Storybook 本身的开发保持同步，并以惯用的方式编写为其他插件的模板。它们可以在 Storybook monorepo 中找到。

  ¥Core addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the Storybook monorepo.

• 社区插件是由庞大的 Storybook 社区编写的插件。它们可以在我们的 website、GitHub 和 npm 上找到。

  ¥Community addons are addons written by the massive Storybook community. They can be found on our website, GitHub, and npm.