超越组件库依赖：用React+TypeScript+Storybook打造专属库

前端

2023-10-30 04:33:36

序言：组件库的意义

在前端开发中，组件库犹如设计师的工具箱，它包含各种预先构建的组件，可供开发者直接调用，大大简化了开发流程，提高了开发效率。

然而，随着项目规模的不断扩大，组件库也面临着诸多挑战：

依赖过多： 市面上的组件库虽然种类繁多，但往往需要依赖许多其他库，这不仅会增加项目的复杂性，还会降低运行效率。
组件难以定制： 预先构建的组件虽然方便，但往往难以满足项目中的特殊需求，修改起来也颇为不便。
版本兼容性： 组件库的版本更新速度较快，这可能会导致与项目中其他库的兼容性问题。

三剑合璧：打造专属组件库

为了解决以上问题，我们可以利用React、TypeScript和Storybook这三项技术来打造属于自己的专属组件库：

React： React作为当下最流行的前端框架，以其组件化的设计理念和丰富的生态系统著称。
TypeScript： TypeScript是一种静态类型检查的语言，它可以帮助我们提前发现代码中的错误，并提高代码的可读性和维护性。
Storybook： Storybook是一个用于构建和展示UI组件的工具，它可以帮助我们快速开发和测试组件，并将其以故事的形式呈现。

搭建组件库的步骤

安装组件库： 首先，我们需要安装必要的库：

npm install react react-dom typescript storybook

组件库配置eslint： 为了保证代码质量，我们需要配置eslint：

npm install eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

{
  "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:import/errors", "plugin:import/warnings"],
  "plugins": ["react", "react-hooks", "import"],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

引入依赖： 接下来，我们需要引入必要的依赖：

import React from "react";
import ReactDOM from "react-dom";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";

编写组件： 现在，我们可以开始编写组件了：

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default MyComponent;

删除多余文件+引用组件： 编写好组件后，我们需要删除多余的文件并引用组件：

rm -rf node_modules/.bin src/App.js src/App.test.js
touch src/index.tsx

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./MyComponent";

ReactDOM.render(<MyComponent />, document.getElementById("root"));

运行项目： 最后，我们可以运行项目：

npm start

Storybook爬取组件属性

Storybook可以爬取组件的属性，并将其以表格的形式展示出来。为了让Storybook正确爬取组件的属性，我们需要在组件中使用shouldExtractLiteralValuesFromEnum选项：

interface Props {
  color: "red" | "green" | "blue";
  size: "small" | "medium" | "large";
}

const MyComponent = (props: Props) => {
  return <div style={{ color: props.color, fontSize: props.size }}>{props.children}</div>;
};

MyComponent.defaultProps = {
  color: "red",
  size: "small",
};

MyComponent.propTypes = {
  color: PropTypes.oneOf(["red", "green", "blue"]),
  size: PropTypes.oneOf(["small", "medium", "large"]),
};