随着前端技术的飞速发展，前端工程变得越来越复杂。为了提高我们的开发效率，我们需要使用一些工具来辅助我们的开发工作。其中一个非常重要的工具就是 Storybook。Storybook 是一个用于开发可复用的 UI 组件的开源工具，它可以帮助我们快速测试、交互、开发和文档化我们的 UI 组件。
针对 Storybook，还有一个非常重要的辅助插件：@storybook/addon-essentials。 这个插件提供了许多工具和功能，用于帮助我们更好地开发和测试我们的 UI 组件。
什么是 @storybook/addon-essentials？
@storybook/addon-essentials 是一个 Storybook 的插件，它提供了一些常用的开发工具和功能，包括：
- Actions：用于捕获和显示组件的用户操作事件。
- Controls：允许开发人员为组件添加可视化的控件。
- Backgrounds：用于在不同的背景上显示组件，从而更好地展示组件的外观和感觉。
- Docs：用于自动生成我们组件的文档，并可在 Storybook 上呈现。
- Viewport：用于在 Storybook 中测试响应式设计和移动优化的组件。
这些功能使得我们能够更好地开发、测试、文档化我们的组件，并且不需要编写大量的代码。
如何使用 @storybook/addon-essentials？
安装和配置
首先，你需要将 @storybook/addon-essentials 安装到你的项目中，可以通过 npm 或 yarn 安装：
npm install @storybook/addon-essentials --save-dev
或
yarn add @storybook/addon-essentials --dev
安装完成后，需要在 Storybook 的配置文件（通常为 .storybook/main.js 或 .storybook/config.js）中进行如下配置：
module.exports = {
addons: ['@storybook/addon-essentials'],
};这将在 Storybook 中注册 @storybook/addon-essentials 插件并启用它的所有功能。
使用
使用 @storybook/addon-essentials 提供的功能非常简单:
Actions
Actions 可以帮助我们捕获组件中的用户操作事件并将它们记录下来，使得我们可以更好的检查我们组件的用户互动行为。 下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- -
------ ---------
---------- -------
--
------ ----- ---- - -- -- ------- ----------- -- ------------------------ ----------------
-------------- - ----- ------
------ ----- ----- - -- -- -
------- ----------- -- -------------------
----- ---------- -------------- ------
-- -- -- --
-------
---------
--
--------------- - ----- -------
-- -- ------- --
------ ----- ----------- - -- -- -
------- ----------- -- ------------------ --------------- -- -------------------------
----- -- -- --- --- ------- ---
---------
--
--------------------- - ----- ---------
-- ------------- --- --------- -----------
---------------------- - -
-------- - -------------- ------- --
--在上面的示例中，我们定义了三个 Button 组件，后一个定义使用了 Actions 插件来捕捉按钮的点击和鼠标移动事件。通过向 WithActions.parameters 添加 actions 参数，我们可以将 Actions 插件启用，并定义它要捕获的事件类型。
Controls
Controls 允许我们在 Storybook 的 UI 中为组件添加可视化控件，这样就可以更方便地测试和修改组件。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- -
------ ---------
---------- -------
--------- -
---------------- - -------- ------- --
----- -
-------- -
----- ---------
-------- --------- --------- ---------
--
--
--
--
----- -------- - ---- -- ------- --------- ---
------ ----- ----- - ------------------
---------- - -
--------- ---------
--
-- -- -------- --
------ ----- ------------ - ------------------
----------------- - -
--------- ---------
---------------- ----------
----- ---------
--
--------------------- - -
---------------- - -------- ------- --
----- -
-------- -
----- ---------
-------- --------- --------- ---------
--
--
--
---------------------- - ----- ----------在上面的示例中，我们定义了一个带有 backgroundColor 和 size 控件的 Button 组件。当使用 Basic 组件时，只会显示组件本身，而当使用 WithControls 组件时，将显示 Control 面板，可以方便地修改组件的颜色和大小。
Backgrounds
Backgrounds 用于在不同的背景下显示组件，从而更好地展示和检查组件的实际外观。下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- -
------ ---------
---------- -------
--------- -
---------------- - -------- ------- --
--
----------- -
----- -- -
---- -------- ------- ------ ---------------- --------- ---
------ --
------
--
--
--
----- -------- - ---- -- ------- --------- ---
------ ----- ----- - ------------------
---------- - -
--------- ---------
--
-- -- ----------- --
------ ----- --------------- - ------------------
-------------------- - -
--------- ---------
---------------- ----------
--
------------------------ - -
---------------- - -------- ------- --
--
-------------------------- - -
----- -- -
---- -------- ---------------- ---------- -------- ----- ---
------ --
------
--
--
------------------------- - ----- -------------在上面的示例中，我们定义了一个带有背景色的 Button 组件。通过在 Backgrounds 插件中定义一个带有背景色的装饰器（decorators），我们可以在不同的背景下显示组件。
Docs
Docs 可以帮助我们为我们的组件自动生成文档，并使得这些文档在 Storybook 上进行呈现。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- -
------ ---------
---------- -------
--------- -
---------------- - -------- ------- --
--
----------- -
----- -
------------ -
---------- -- -------- ------ --------- ---- --- ---------- ------ ----------------- --- --------
--
--
--
--
----- -------- - ---- -- ------- --------- ---
------ ----- ----- - ------------------
---------- - -
--------- ---------
---------------- ----------
----- ---------
--
-- -- ---- --
---------------- - -
----- -
------- -
----- -------- ------------------------- -------------------------------
--
--
--在上面的示例中，我们定义了一个带有自动生成文档的 Button 组件。通过向 parameters 添加 docs，我们可以定义我们的组件的描述信息，并使其在 Storybook 上呈现。通过向 Basic.parameters 添加 docs，我们还可以将我们的组件的代码呈现在 Storybook 上。
Viewport
Viewport 用于测试响应式设计和移动优化的组件。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- -
------ ---------
---------- -------
--
----- -------- - ---- -- ------- --------- ---
-- -- -------- --
------ ----- ------------ - ------------------
----------------- - -
--------- ---------
---------------- ----------
----- ---------
--
---------------------- - ----- ----------
----------------------- - -
--------- -
---------------- ----------
---------- -
---------- -
----- ------- ---
------- - ------ -------- ------- ------- --
--
---------- -
----- ------- -------
------- - ------ -------- ------- ------- --
--
------- -
----- -------
------- - ------ -------- ------- -------- --
--
--
--
--在上面的示例中，我们定义了一个 带有 Viewport 插件的 Button 组件。通过向 WithViewport.parameters 添加 viewport，我们可以定义不同的视口大小和设备类型，从而更好地测试我们的组件的视觉方面。
总结
@storybook/addon-essentials 是一个非常强大的工具，它可以帮助我们更好地开发和测试我们的 UI 组件。在本篇文章中，我们介绍了五个常用的功能和工具：Actions、Controls、Backgrounds、Docs 和 Viewport，以及它们在开发 UI 组件时的使用方法和优点。如果你还不熟悉它们的使用方法，请尝试在你的项目中使用它们，相信会有助于提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb44cb5cbfe1ea0611254