［译］创建 React 组件库流程

站长

2022年11月21日 17:18 · 阅读数 50

原文地址：dev.to/aviavinav/t…

原文作者： dev.to/aviavinav

作为一个开发者能够创建组件库是很棒的事情，如果你不知道如何开始，让我指导下。

事先声明，我不是一个组件库开发专家，以下只是我先前搭建组件库的一些经验。

前置条件

在你开始之前，需要知道：

React 基础知识；
TypeScript（可选但是最好会，不过你也可以只使用JavaScript）。

为什么要做组件库？

React 组件库在很多方面都很有用，你可以在项目不断增长的时候复用它。另外，也可以开源让所有人都可以查看或者参与构建。

工具要求

React - 不多说；
TypeScript - 可选但是推荐；
Storkbook - 如果没听过它的话别慌张，我们稍后会提到怎么使用它来调试组件。

开始

有很多方式配置组件库。如果你希望在一个组织底下创建多个仓库的话，我推荐使用 monorepo （单体式仓库）。但是在这篇教程中我们先从头创建一个简单的库开始。

所以，首先我们创建 package.json 文件：

npm init

一旦初始化完成，就可以开始安装依赖。平时来说，我们安装依赖的时候运行 npm i [dep-name] ，不过在这里我们会安装 dev-dependencies 和 peer-dependencies.

Dev-dependencies 是一些不会打包到产物的依赖项，它们只是一些在开发调试的时候使用到的依赖。

Peep-dependencies 基本上就是：你要使用某个的库之前，需要事先安装好的依赖。比如说，有一个叫做 avi-lib 的库，它的 peer-dependencies 是 react 和 react-dom 。然后，如果你需要要在项目中使用 avi-lib 的话，就需要先安装好 react 和 react-dom 。

现在我们把 react ，react-dom ，typescript ，@types/react 和 @types/react-dom 作为devDependencies。

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

在 peerDependencies 指定合适的 react 和 react-dom 版本：

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

下一步初始化 tsconfig 文件:

npx tsc --init

在 tsconfig.json 文件中，更改选项： "jsx: "react" 来启用 jsx。

编写组件

创建 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

Storkbook 是个超棒的、必不可少的创建组件库的工具，它帮助你在编写组件代码的时候预览和新增文档，甚至可以帮助你托管组件提供给他人调试。在这篇文章中我们主要使用它来调试组件。

在库里配置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 会随着我们点击而改变。

基本上就是这样了，现在可以尝试在按钮上加点自己的小魔法，或者更多的组件，甚至创建React Hooks。

文档

在 README 文件或者网站上编写文档是个很好的主意，这样可以帮助其他人使用你的库。在这篇教程中我们将不会编写详细的文档，皆因目前只有一个按钮组件。

打包

一旦完成了组件的编写工作，我们就可以把组件库打包起来。

有些人偏好于在项目复制黏贴文件，不过打包成一个文件是个好主意。打包成单文件也有益于在CDN上使用。

代码打包就会用到打包器。现在的打包器有了很多选择，在此处我们会用 tsup 来打包，因为在我们这个场景下，使用 tsup 并不需要额外的配置文件。

安装 tsup 可以运行以下命令：

yarn add -D tsup

以上会把 tsup 作为 dev-dependency 安装在我们项目。现在，在 package.json 文件中新增这个脚本：

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

现在运行 yarn build , 这将会在 dist 目录新增一个 index.js 文件。如果你有留意到我们在构建脚本新增了 --dts 参数的话，这个参数将会在项目构建的同时生成 index.d.ts 文件。

发布

现在所有工作已经完成了，是时候向世界展示下你开发的好家伙了（除非是私人使用的时候）。在发布之前，去 package.json 文件，把名字改成自己的（name字段)和选择一个合适的版本好（如果你不会，可以查看 semantic versioing ），在 description 字段描述这个库是干什么的，和在keywords 字段新增一些关键字让别人可以发现它）。

现在新增一个 .npmignore 文件，这个有点类似 .gitignore 。这个文件包含了一些你不希望发布到库产物里的内容，比方说 node_modules 。这个文件是可选的，如果你没有这个文件，npm 会自动使用 .gitignore 的规则。

如果你没登录 npm 的话，输入 npm login 登录，然后输入账号密码。如果你没注册过 npm 账号，可以去 www.npmjs.com/ 注册一个。

一旦完成了上面的操作，就可以简单地在终端敲：

npm publish

如果没有任何报错地完成了的话，恭喜！你的库已经发布了。现在你（或者其他人）可以在项目中使用这个库了。

小提示

尽可能尝试 Typescript；
在 README 中编写文档，如果你希望的话也可以是文档网站；
去了解更多 Storybook 的模版和文档。