简介
在前端开发中，组件化开发愈发流行。这时候一个好的组件库就相当重要了，而 Storybook 则是其中一个优秀的组件库。在 Storybook 中，我们可以将组件按照业务场景和组件功能分类，可以实现独立调试每个组件以及将每个组件独立出来发布为 npm 包。
但是，使用 Storybook 需要一定的功力来进行配置和使用，这往往会让开发者感到困扰。而 @beisen/storybook-addons 这个 npm 包则是为了解决这个问题而出现的。使用这个包可以让我们在 Storybook 中更加方便地使用。下面我们就来详细讲解如何使用它。
安装
安装过程非常简单：
npm install @beisen/storybook-addons
安装完成后，在 .storybook/addons.js 中增加一行：
import '@beisen/storybook-addons/register'
实例
我们以一个 vue 组件库为例来演示如何使用 @beisen/storybook-addons。我们假设组件库中有一个名为 foo 的组件，该组件具有两个 props：text 和 color，并且具有两个 slots：default 和 slotA。
展示组件信息
在 Storybook 中，我们一般会为组件编写一个 Knobs 面板以便于在开发调试时修改组件属性和状态。然而，在展示组件的信息时，我们常常需要组件的 props 和 slots 离不开展示。此时，@beisen/storybook-addons 提供了 ShowDocs 和 ShowCode 两个组件来进行展示。
-- -------------------- ---- -------
---------------- -------
--------------- -- -- --
----------- ------
------ -
----- -
-------- ------------ ------- -------
--
------ -
-------- --------------- ------- -------- --------
-
--
--------- ----- ------------ -----------------------
-------------- -
------ -
----- ---- ---- ----- -- -----------
------ ---- ----- -- ----------
--
------ -
-------- ---- ------- ---- -- -----------
------ -------
-
-
---在上面的代码中，我们为组件设置了两个 props：text 和 color，同时也为组件编写了两个 slots：default 和 slotA。在代码中还出现了 ShowDocs 和 ShowCode 结构，我们将详细地说明这两个结构的使用方法。
ShowDocs
ShowDocs 的作用是展示组件的 props 和 slots。在上面的代码中，我们使用了 documentation 属性来定义组件的 props 和 slots，这些信息会被传递到 ShowDocs 中进行展示。
-- -------------------- ---- -------
-------------- -
------ -
----- ---- ---- ----- -- -----------
------ ---- ----- -- ----------
--
------ -
-------- ---- ------- ---- -- -----------
------ -------
-
-ShowCode
ShowCode 的作用是展示代码。ShowCode 有两种模式，分别是 stories 和 source。
在 stories 模式下，我们可以展示组件的 stories，并且在这个结构中，我们可以使用 includeStories 属性来选择展示哪些 stories。
-- -------------------- ---- ------- ---------------- ------- --------------- -- -- -- --------- ------------- --- ------------- -- -- -- --------- ---------- ----------------------------- --- --------- -------------- --------------------------------- --
在上面的代码中，我们选择了展示 foo/default 这个 story 的代码信息。
在 source 模式下，我们可以展示整个文件的源码。
<ShowCode mode="source" />
在上面的代码中，我们展示了当前组件源码的信息。
ShowStorybook
ShowStorybook 的作用是展示 Storybook 的信息。在这个结构中，可以使用 forAddon 属性来指定展示哪个 addon 的信息。
<ShowStorybook forAddon="@storybook/addon-knobs"></ShowStorybook>
在上面的代码中，我们展示了 Storybook addon 「Knobs」的信息。
结语
通过本篇文章，我们详细学习了如何在 Storybook 中使用 @beisen/storybook-addons 这个 npm 包。通过这个包，我们可以更好地展示组件的信息，使得组件的开发调试更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128008