使用 Storybook 简化前端开发

封面图片由 Victor R. Ruiz 在 Flickr 上提供

我经常会改变一些东西或者更新我使用的库，虽然它们可以工作，但是看起来不再好看。

比如，我更新了系统react-native-svg，他们把那个rotate道具改名为“ rotation，然后突然发现一个滑块不再旋转90°了。它还能用，但看起来很奇怪。”

所以我想，我需要一种方法来快速找到这些问题。自动查找当然也很好，但第一步应该让我无需点击整个应用程序就能看到这些问题。

进入故事书

Storybook将自己定位为UI 组件的开发环境。

什么

Storybook 允许你在其自己的 UI（组件目录）中以不同的状态渲染组件。这允许你快速浏览所有组件，例如，当你考虑编写一个新组件时，看看是否已经有可以完成任务的组件，或者你想检查更新后某些组件是否损坏。

由于组件是在应用程序外部呈现的，因此它也应该带来更好的组件架构，因为它们必须是真正独立的。

如何

首先，将它添加到你的项目中。为此，你需要安装 CLI，它会设置所有依赖项并创建一些稍后会用到的文件：

$ npm i -g @storybook/cli
$ cd your-project
$ getstorybook

该getstorybook命令会判断你的项目类型，并尝试安装预先配置好的 Storybook。我使用create-react-app创建了一个 React 应用。

此后，你的package.json

• storybook用于开发
• build-storybook用于创建目录的静态构建

您还拥有一个名为的新目录stories，在我的create-react-app情况下，它是在your-project/src

您现在可以为您的组件编写故事，这有点像您从单元测试中了解的测试。

让我们尝试一个简单的例子，我想要一个<Text>组件，让我通过布尔值属性text-decoration来设置它。underline

// src/Text.js

import React from "react";

export default ({ children, underline }) => (
  <span style={{ textDecoration: underline ? "underline" : "none" }}>
    {children}
  </span>
);

现在我尝试在 Storybook 中渲染这个组件，并使用它的两个 props 状态。为此，我将import组件Text导入src/stories/index.js到 StorybooksstoriesOf()函数中。

// src/stories/index.js

import React from "react";
import { storiesOf } from "@storybook/react";
import Text from "../Text";

storiesOf("Text", module)
  .add("without underline", () => <Text>Hello, world!</Text>)
  .add("with underline", () => <Text underline>Hello, world!</Text>);

storybook现在我可以通过运行脚本并打开浏览器来检查一切是否正常http://localhost:9009

$ yarn run storybook

在左侧，您可以看到一个树形导航。每次调用该storiesOf()函数都会创建一个下拉菜单，其中包含通过该add()方法添加的故事链接。

我现在可以点击这个目录来查看我的Text组件的不同状态。

结论

Storybook 是一种有趣的前端开发方法。它允许你独立创建和测试组件，这样你就可以一次专注于一个问题。目录 UI 允许你快速浏览组件，并检查在应用中进行某些更改后它们是否仍然有效。