什么是 Storybook?
Storybook 是用于开发 UI 组件的工具，它可以在独立的环境中，独立展示 UI 组件，并且快速反馈开发者对组件的更改。
Storybook 本身是用于组件开发的，而非完整页面的。一旦我们有了可重用的 UI 组件，我们就可以将其列表传递给 Storybook，并在独立的环境中展示出来。这有助于我们开发者了解其他开发者在项目中使用的组件，以及在他们自己的代码中如何使用这些组件。
npm 包 storybook-groups
storybook-groups 是一个可以使的 Storybook 分组展示的插件，它可以让我们更加清晰的展示组件，以及方便我们更好的管理组件。
安装和配置
我们可以通过 npm 安装 storybook-groups：
--- ------- -- ----------------
接下来，在 .storybook/addons.js 中导入 storybook-groups：
------ -------------------
这里的 addons.js 的位置可能在 .storybook 文件夹内，也有可能在单个组件项目的根目录内。
接着，在 .storybook/config.js 中，配置 storybook-groups 的参数：
------ - -------- - ---- ------------------- ------ - ---------- - ---- ------------------- ---------------------
同时，我们需要在 stories 文件中，给组件加上 groupName 属性，指定组件所属的分组：
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ----------- -------------------- ------- --------------- -- -- ------- --------------- ---------------- - ---------- -------- -- ----------------- -- -- ----------------- ---------------- - ---------- -------- -- ------------ -- -- ------- ------------- ---------------- - ---------- -------- ---
这里将三个 Button 组件分到了一个名为 Button 的分组中。
分组展示
在配置好 storybook-groups 后，我们可以开始分组展示组件了。在默认情况下，storybook-groups 会按照 groupName 属性的值来展示组件，如果我们想要修改分组展示的呈现形式，则可以在 .storybook/config.js 中指定具体的配置参数。
举个例子，在以下的配置中，我们指定了所有分组都按照首字母进行分组，并设置了分组展示时的排序方式：
------ - -------- - ---- -------------------
------ - ---------- - ---- -------------------
---------------------
------- -
-
--- ---------
----- ----------
--------- -----------
--
--
-------- -
---------- -----
----- -
--- -------
---------- ------
--
--
--------- -
- ------------ ---------- ------ - -------- --
- ------------ ------------ ------ - ---------- --
- ------------ ------- ------ - ----- --
--
----在以上的配置中，我们：
- 指定了一个名为 button 的分组，将其中包含的 Button 组件加入该分组中；
- 指定了展示配置中，同时展示 Panel 和 List 呈现；
- 指定了展示分组的排序方式，按照组件名称的首字母进行排序；
- 指定了展示每个分组所包含的组件的 sections。
总结
通过使用 npm 包 storybook-groups，我们可以更加清晰、方便的管理组件，以及更加高效的展示组件的效果和功能，在组件开发过程中具有非常重要的作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eac81e8991b448dc23a