前言
在前端开发中，样式组件通常都是复杂的拼图，在面对复杂的用户交互时，我们往往需要使用控制器来辅助我们调试和测试页面。而 @storybook/addons 就是一个非常好用的控制器库，它可以帮助我们快速构建各种 UI 组件，并通过这些组件来测试 UI 的交互和流程。
安装 @storybook/addons
在使用 @storybook/addons 之前，我们需要先安装它。在终端中输入以下命令即可：
npm install --save-dev @storybook/addons
配置 @storybook/addons
我们需要在我们的项目中生成一个配置文件以使用 @storybook/addons。在根目录中创建一个名为 stories.js 的文件，其中包含以下内容：
-- -------------------- ---- -------
------ - ------------- --------- - ---- -------------------
------ - ----------- - ---- ---------------------------
------ - -------- - ---- ------------------------
-- ----- ------ ------
------ ---------------------
-------------
-------------
----- --- -- ---------
---- ----
------------- ------
----------------- -----
--------------- ------
-------------- ------
------------------ ------
------------------ ------
------------------- --------
----------------------- ------
---------------- -----
--
--
----------
-
-------------------------- ----- ------------------
--
------
--
----------------------- ------- ---- ----使用 @storybook/addons
现在我们已经安装并配置 @storybook/addons，让我们开始在我们的组件中使用它。在我们的组件目录下创建一个名为 stories.js 的文件，这个文件用于定义我们的 stories。我们将使用 storiesOf 方法来定义我们的故事：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ------------ - ---- -------------------
------ - ---------- ----- -------- ------- ------ - ---- -------------------------
------ ------ ---- -----------
------------------------
------------------- -------
---------- ------ -- -- -
--------
-------------- ------ ------------
---------
--
---------------- -- -- -
------- ----------------------------- -------
-------------- ------ ------------
---------
--
---------- -------- -- -- -
--------
----------------- ----
---------
--
---------- -------- -- -- -
--------
---------------- ---------- ---------- ------------ ----------
---------
---现在，我们已经编写了一个 Button 组件，并在 stories.js 文件中创建了四个故事。通过使用 withKnobs decorator 和 addon-knobs，我们可以添加各种控件，比如文本框、选择框等等。
现在，我们可以通过运行以下命令来启动 Storybook：
npm run storybook
在浏览器中打开 http://localhost:6006/ ，你将看到我们创建的 Button stories，这里你可以进行控件操作，看到组件的不同变化，非常方便。
总结
通过本篇文章，我们了解了 @storybook/addons 的作用、安装和使用，希望能对你的前端开发工作有所帮助。并且我们还学习到了如何使用连配合 addon-knobs 添加各种控件，这些控件将帮助我们更好地测试我们的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/88499