简介
@storybook/cli 是一个用于构建 React 组件的 UI 开发环境工具。它可以帮助开发者快速搭建一个交互性强，易于调试和管理的 UI 开发环境，使得开发者可以更加专注于组件的开发和功能实现上。
本文将从安装、配置到实践应用，为您详细介绍如何使用 @storybook/cli 进行前端类的 UI 组件开发以及构建。
安装
在使用 @storybook/cli 前，需要先安装 node.js 和 npm。
接下来在命令行中执行以下命令进行安装：
npm install -g @storybook/cli
配置
安装完成后，我们可以通过以下命令来创建一个新的 Storybook 项目：
npx -p @storybook/cli sb init
执行完毕后，会生成一个 .storybook/ 目录和一个 stories 目录。其中，.storybook 目录用于存放 Storybook 的配置文件，stories 目录则是用于存放组件的实例和测试用例的目录。
除此之外，Storybook 会自动为我们生成一个默认的配置，我们也可以通过 .storybook/main.js、.storybook/preview.js 等文件来自定义和修改配置。
使用
添加组件
首先我们需要为我们的 UI 组件添加 Story。可以通过以下命令在 stories 目录下新建一个 .stories.js 文件，并编写一个简单的例子：
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';
storiesOf('Button', module)
.add('with text', () => <Button>Hello Button</Button>)
.add('with emoji', () => <Button>😀 😎 👍 💯</Button>);上面的代码中，使用 storiesOf 方法来为我们组件创建一个 Story，在里面可以添加不同的 Case 来进行测试。
运行
我们可以通过以下命令在浏览器中运行我们的 Storybook：
npm run storybook
此时，可以通过访问 http://localhost:6006/ 来查看 Storybook 的运行结果。在页面上，我们会看到类似于下图的界面：
组件交互
在上面的例子中，我们没有涉及到组件的交互性展示。下面，我们通过一个复杂组件的例子来演示如何在 Storybook 中将组件的交互性进行展示。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- -------------------
------ - ------ - ---- ---------------------------
------ ----- ---- ----------
------------------ -------
-------------- -- -- ------ ---
---------- ------------- -- -- ------ ------------------- ----- ---------- ---
---------- ----- -------- -- -- -
----- ------- --------- - -------------
----- ------------ - --- -- -
-------------------------
-----------------------------------
--
----- ----------- - -- -- -
-------------
--------------------
--
------ -
------
-------------
------------------- ----- ----------
-----------------------
---------------------
--
--
---以上代码中，我们为 Input 组件添加了三个 Case，分别是：
simple：默认不传任何参数的组件with placeholder：带有提示文本的组件with clear button：带有清除按钮和交互事件的组件
运行 Storybook，我们可以看到一个类似于下图的界面：
在 with clear button Case 中，我们还添加了 onChange 和 onClear 事件来监听组件值的变化和处理清除事件等交互性展示，从而使得我们能够直观地看到组件的效果和行为。
总结
通过本文的学习和实践，我们可以使用 @storybook/cli 来快速构建我们的 UI 组件开发环境。
在实际项目中，我们可以使用 Storybook 来进行组件的开发、测试、文档编写等工作，从而提高我们的工作效率和代码质量，同时也能够为我们的团队协同合作带来诸多便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/86306