likes
comments
collection

[译]创建 React 组件库流程

作者站长头像
站长
· 阅读数 18

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

原文作者: dev.to/aviavinav

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

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

前置条件

在你开始之前,需要知道:

  • React 基础知识;
  • TypeScript(可选但是最好会,不过你也可以只使用JavaScript)。

为什么要做组件库?

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

工具要求

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

开始

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

所以,首先我们创建 package.json 文件:

npm init

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

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

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

现在我们把 reactreact-domtypescript@types/react@types/react-dom 作为devDependencies。

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

在 peerDependencies 指定合适的 reactreact-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 项目然后自动运行。在它完成安装以后,你会看到目录中多了 .storybooksrc/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 的模版和文档。

更多资源