从0到1开发一个React组件库

背景

前端技术的不断发展过程中，组件化、模块化已成为主流。

当开发的项目中有一些公共组件可以沉淀的时候，将这些组件抽离出来，开发一个组件库无疑是一个好的选择。

那么怎么去开发一个组件库呢？本文将和你一起从零开发一个 React 组件库。

• 本文项目源码：github.com/jiaozitang/…
• 本文组件库 npm 包地址：www.npmjs.com/package/rea…

一、搭建项目

组件库的第一步是搭建项目，选择合适的技术，并制定代码规范。

1. 技术选型

1.1 前端框架

前端框架的选择不用多说，大家都是选择日常开发中使用到的框架，本文使用的是 React。

1.2 组件库工具

组件库工具，市面上比较流行的 2 个组件库工具分别的 dumi 和 Storybook。

dumi，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

Storybook 是一个用于单独构建 UI 组件和页面的前端工具。成千上万的团队将它用于 UI 开发、测试和文档。它是开源和免费的。

dumi 和 Storybook 都是专用于组件开发场景的工具，由于 Storybook 更加支持测试难以到达的状态和边缘案例，因此最终选择 Storybook 来开发组件库。

2. 快速开始

2.1 creat-react-app

使用 creat-react-app 创建一个支持 TypeScript 的 React 项目。

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

2.2 Storybook

Storybook 教程：storybook.js.org/。

为 React 项目添加 Storybook 能力。

cd ./my-react-component
npx storybook init 

此时通过 yarn storybook，将在本地启动 Storybook 并输出地址。根据您的系统配置，它会自动在新的浏览器选项卡中打开地址，然后您会看到一个欢迎屏幕。

3. 代码规范

3.1 Prettier

Prettier 是一个代码格式化工具，可以让团队的代码风格保持一致。可支持的源码类型包括：JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS、HTML、JSON、YAML 等等。

安装：

yarn add prettier -D 

项目根目录下添加配置文件 .prettierrc：

{"arrowParens": "always","bracketSameLine": false,"bracketSpacing": true,"embeddedLanguageFormatting": "auto","htmlWhitespaceSensitivity": "css","insertPragma": false,"jsxSingleQuote": false,"printWidth": 80,"proseWrap": "preserve","quoteProps": "as-needed","requirePragma": false,"semi": true,"singleQuote": false,"tabWidth": 2,"trailingComma": "es5","useTabs": false,"vueIndentScriptAndStyle": false
} 

修改 packages.json：

"scripts": {"prettier": "prettier src --write",
} 

运行 yarn prettier 将会格式化 src 目录下所有文件的代码样式。

3.2 ESlint

ESLint 用于检测 JS 代码，发现代码质量问题并修复问题，还可以自己根据项目需要进行规则的自定义配置以及检查范围等等。

安装：

yarn add eslint eslint-pl