作为前端开发人员，我们总希望能够快速准确地构建和开发应用程序。为了实现这一目标，我们需要一个可靠的系统，能够通过可视化和交互组件的形式快速开发和测试应用。Storybook 就是如此一个构建和交互组件的工具，在我们前端开发工作中扮演着至关重要的角色。
在这篇文章中，我们将领略 npm 包 @design-systems/storybook 的神奇之处。我们将探索如何安装和使用该工具包，以及如何构建漂亮的 UI 组件并在 Storybook 中进行交互。
安装
首先，我们需要安装 Node.js。这是因为 Node.js 允许我们使用 npm 包管理器安装 @design-systems/storybook 软件包。因此，请确保 Node.js 已在您的机器上运行：
node -v
接下来，请使用 npm 软件包管理器安装 @design-systems/storybook：
npm install --save-dev @design-systems/storybook
完成后，您就可以开始使用 @design-systems/storybook。
使用
接下来，我们将探讨如何使用 @design-systems/storybook 来创建漂亮的 UI 组件并在 Storybook 中进行交互。
创建 UI 组件
首先，我们需要创建一个 UI 组件。我们可以在项目目录中创建一个名为 Button.js 的文件，用于创建与按钮相关的组件：
import React from 'react';
export default function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}在这个例子中，我们创建了一个名为 Button 的函数组件，用于创建基本的 HTML 按钮。它有两个属性，即 text 和 onClick。当 text 被设置为 "Click me!" 并且 onClick 被设置为回调函数时，它将创建一个可点击的按钮。
构建 Storybook
接下来，我们需要配置 Storybook，以便能够在其中测试和交互我们创建的组件。为此，请在项目目录中创建一个名为 .storybook 的文件夹，并在其中创建一个名为 main.js 的文件。该文件将用于配置 Storybook。
在文件中输入以下代码：
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: ['@design-systems/storybook'],
};在这个例子中，我们创建了一个带有两个选项的 module.exports 对象。 第一个选项是 stories，它指定了 Storybook 将包含的所有故事。 在这种情况下，我们使用通配符 **/*.stories.js 来包括任何具有名称以 .stories.js 结尾的文件。
第二个选项是 addons，其中指定了要使用的 Storybook 插件。 在这种情况下，我们使用 @design-systems/storybook 插件来扩展 Storybook。
接下来，让我们创建一个名为 Button.stories.js 的文件，在该文件中创建一个名为 “Button” 的 Storybook 故事：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ----------- ------ ------- - ------ --------- ---------- ------- -- ------ ----- ------- - -- -- ------- ----------- ---- ----------- -- ------------------ ---
在这个例子中，我们创建了一个名为 Button 的 Storybook 故事。故事由一个标题和一个组件组成。在 Button.stories.js 文件中导出的 Default 常量是一个带有 “Click me!” 文本的 Button 组件，可以在单击时触发警报。
运行 Storybook
现在我们已经创建了一个基本的 Storybook，我们可以运行它以查看我们创建的组件。 在命令行中，输入以下命令：
npm run storybook
运行此命令后，您将看到 Storybook 界面，其中包含我们创建的 “Button” 故事。 单击该按钮，您将看到所创建的按钮，可以单击它来触发警报。 在这里，您可以测试和交互您的组件，并确保它们按预期工作。
结论
npm 包 @design-systems/storybook 是一个出色的工具包，它可以帮助我们快速地构建和测试可重用的 UI 组件。本文介绍了如何安装和使用该软件包，以及如何创建漂亮的组件并在 Storybook 中进行交互。通过这些步骤，您将能够更有效地开发应用程序，并加速你的开发的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4058fbdbf7be33b25671ed