React 组件库的制作

组件库是 Web 开发人员可以制作的最酷的东西之一，但如果您不知道如何制作，请让我为您提供一些指导。

在我们开始之前，我想告诉你，我并不是制作组件库的专业人士，这只是根据我以前开发组件库的经验。

先决条件

在开始之前，您应该了解以下内容：

React 基础知识
Typescript（可选但优先考虑，您也可以使用 Javascript）

为什么要制作组件库？

反应组件库在很多方面都很有用，您可以在项目中使用它来扩展和统一，或者您可以将您的库开源供所有人使用和贡献。

所需工具

React - 因为这是一个关于 React 组件库的教程
Typescript - 这是可选的，但建议使用
Storybook - 如果你没听说过也没关系，别担心。我们将用它来预览我们的组件。

入门

我们可以通过多种方式来设置我们的库，如果您想在同一个组织中创建多个包，我建议使用 monorepo，但为了本教程的目的，我们将从头开始设置一个非常简单的库。

因此，首先，继续创建一个 package.json 文件：

npm init

初始化项目后，我们将开始安装依赖项。与普通项目直接使用来安装依赖项不同npm i [dep-name]，这里我们将使用 dev-dependencies 和 peer-dependencies。

Dev-dependencies 是未打包在包中且不会增加库大小的依赖项，它是仅在开发期间需要的依赖项。

对等依赖关系基本上告诉您需要安装某个包才能使用该库，例如，如果我有一个名为的库avi-lib并且它具有作为react&的对等依赖关系react-dom，那么如果我想在我的项目中使用，avi-lib我需要在项目中已经安装react&作为依赖关系。react-dom

现在继续安装react、、、& 、作为 devDependencies react-dom。tyepscript@types/react@types/react-dom

yarn i -D react react-dom typescript @types/react @types/react-dom

添加react&react-dom作为具有适当版本的对等依赖项：

{
    ...
    peerDependencies: {
        "react": ">=16.0.0",
        "react-dom": ">=16.0.0"
    }
    ...
}

接下来，初始化 tsconfig 文件：

npx tsc --init

在tsconfig.json文件中，继续并启用jsx选项"jsx": "react"。

制作组件

完成后，创建一个目录src或任何你想命名的目录。该目录将包含所有代码。

在里面src，创建另一个目录components并创建一个文件Button.tsx。现在，打开该文件并写一个简单的按钮：

import React from 'react';

export interface ButtonProps {
  children: React.ReactNode;
  onClick: () => void;
}

export const Button = ({ children, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{children}</button>;
};

现在在src目录中创建一个index.ts文件，并写入以下内容：

export { Button, ButtonProps } from "./components/Button"

故事书

Storybook 是一款非常棒的工具，几乎是组件库的必备工具。它可以帮助预览组件、添加文档，甚至还可以托管组件供其他人测试。在本文中，我们将主要使用它来测试我们的组件。

要在您的库中设置故事书，请运行以下命令：

npx storybook --init

Storybook 会自动检测这是一个 React 库并进行安装。安装完成后，您将看到一个.storybook目录和一个src/stories文件夹。您无需对.storybook文件夹进行任何操作，只需在文件夹中使用组件即可src/stories。

在这个src/stories目录中，你会看到一堆东西，但不用担心，它们只是模拟数据。你可以继续清空它，只留下Button.stories.tsx。现在你会看到这个文件中有很多东西，继续清空它并输入以下内容：

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { Button } from '../';

const stories = storiesOf('Button', module);

stories.add('Button', () => {
  const [value, setValue] = useState('Hello');
  const setChange = () => {
    setValue(value === 'Hello' ? 'Bye' : 'Hello');
  };

  return <Button onClick={setChange}>{value}</Button>;
});

现在继续检查，在终端中运行以下命令：

npm run storybook

这将打开一个浏览器窗口localhost:6006，您可以看到我们的小按钮在工作，它value在被点击时会发生变化。

就是这样，现在继续为按钮添加自己的魔力，制作更多组件，同样，你甚至可以创建钩子。

文档

最好将库中组件的相关信息记录在 README 文件或文档网站上，这样可以帮助所有使用库的用户。在本教程中，由于它只包含一个按钮组件，因此我们不会编写文档。

捆绑

完成组件制作后，让我们捆绑我们的库。

捆绑是个好主意，因为它能帮你生成单个文件。有些人喜欢在项目中拖放单个文件。单个文件也可用于 CDN。

要捆绑组件，您必须使用捆绑器。市面上有很多捆绑器可供选择，但这里我们将使用tsup，因为在我们的用例中，tsup 不需要任何配置。

要安装 tsup，请执行以下操作：

yarn add -D tsup

这会将 tsup 安装为开发依赖项，现在在您的package.json文件中添加一个脚本：

{
    ...
    scripts: {
        ...
        "build": "tsup src/index.ts --dts"
    }
    ...
}

现在，继续运行yarn build，这将在目录中创建一个index.js文件dist。如果你注意到，我们--dts在构建脚本中添加了一个，这将在中为我们的项目生成类型定义index.d.ts。

出版

现在一切都已完成，是时候向世界展示你的成果了（如果是个人使用，则无需展示）。在发布之前，请前往你的package.json项目主页，你会发现一些内容：为你的库选择一个名称，并添加一个合适的版本号（如果你不知道如何使用，可以使用语义版本控制）、一个功能描述，以及一些关键词，以便你的库更容易被找到。

现在添加一个.npmignore文件，这与非常相似.gitignore，该文件将包含您不想随库一起发布的内容，例如。node_modules虽然此文件是可选的，即使您不包含它，.gitignore也会使用文件。

如果您尚未登录 npm 帐户，请先登录npm login，然后输入您的用户名和密码。如果您没有 npm 帐户，可以前往https://www.npmjs.com/注册一个。

完成后，只需在终端中运行以下命令：

npm publish

一旦顺利完成，恭喜！你的库已发布。现在你（以及其他人）可以在你的项目中使用你的库了。

尖端

尝试使用 TypeScript
在您的 README 中添加文档，如果需要，还可以添加文档网站
我没有在文章中这样做，而是使用 git 并在不同的分支上进行更改main
阅读有关 Storybook、其模板和文档的更多信息

React 组件库的制作

React 组件库的制作

先决条件

为什么要制作组件库？

所需工具

入门

制作组件

故事书

文档

捆绑

出版

尖端

更多资源