用 CRA 快速搭建一个反应组件库

初始化项目

首先，我们需要创建一个新的项目。可以使用 npm 或 yarn 来安装 create-react-app：

npx create-react-app my-component-library --template typescript

这样，我们就创建了一个新的 React 项目，并且已经启用了 TypeScript。

添加 Sass 支持

接下来，我们需要添加 Sass 支持。在项目目录下，安装 Sass：

npm install sass

然后，在 src 目录下，创建一个新的文件 global.scss。在这个文件中，我们可以添加一些全局样式，比如重置样式和一些通用的样式。例如：

/* 重置样式 */

* {
  box-sizing: border-box;
}

/* 通用的样式 */

body {
  font-family: sans-serif;
}

最后，在 package.json 文件中，添加以下内容：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "sass": "sass --watch src/global.scss:src/global.css"
  }
}

这样，我们就可以使用 Sass 了。

编写 Button 组件

接下来，我们来编写一个 Button 组件。在 src 目录下，创建一个新的文件夹 components，并在其中创建一个新的文件 Button.tsx。在这个文件中，我们可以编写我们的 Button 组件：

import React from "react";

interface ButtonProps {
  children: React.ReactNode;
  className?: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

const Button: React.FC<ButtonProps> = ({ children, className, onClick }) => {
  return (
    <button className={`button ${className}`} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

在上面的代码中，我们定义了一个 ButtonProps 接口来定义组件的属性，然后定义了一个 Button 函数组件。这个组件接受三个属性：children、className 和 onClick。children 属性是组件的内容，className 属性是组件的类名，onClick 属性是组件的点击事件处理函数。

单元测试

为了确保我们的组件按预期工作，我们需要编写一些单元测试。在项目目录下，安装 Jest：

npm install --dev jest

然后，在 src 目录下，创建一个新的文件夹 __tests__，并在其中创建一个新的文件 Button.test.tsx。在这个文件中，我们可以编写我们的单元测试：

import React from "react";
import { render, screen } from "@testing-library/react";
import Button from "../components/Button";

describe("Button", () => {
  it("should render correctly", () => {
    render(<Button>Hello World</Button>);
    expect(screen.getByText("Hello World")).toBeInTheDocument();
  });

  it("should call the onClick handler when clicked", () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick}>Hello World</Button>);
    screen.getByText("Hello World").click();
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

在上面的代码中，我们使用 render() 函数来渲染我们的组件，然后使用 screen.getByText() 来获取组件中的文本内容。我们还可以使用 expect() 来断言组件是否按预期工作。

部署组件库

当我们完成了组件库的编写后，我们需要将其部署到某个地方，以便其他人可以使用。我们可以使用 npm 来发布组件库：

npm publish

这样，我们的组件库就会被发布到 npm 上，其他人就可以通过 npm 来安装和使用我们的组件库了。

总结

在本文中，我们介绍了如何快速用 CRA 搭建一个 React 组件库。我们使用 create-react-app + TS 来初始化项目，并添加 Sass 支持，在编写 Button 组件时，添加 ButtonHTMLAttributes 来提供更多的自定义属性，让组件更有通用性。最后，我们还介绍了如何进行单元测试和部署组件库。希望本文能对你有帮助。