前言
俗话说：“麻雀虽小，五脏俱全”，搭建一个组件库，知之非难，行之不易，涉及到的技术方方面面，犹如海面风平浪静，实则暗礁险滩，处处惊险～
目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库[1] 和 React 技术栈的 yep-react 组件库[2]。然而这些组件库大都从零开始搭建，包括 Webpack 的繁杂配置，Markdown 文件转 Vue 文件功能的开发，单元测试功能的开发、按需加载的 Babel 插件开发等等，完成整个组件库项目实属不易，也是一个浩大的工程。如果我们想快速搭建一个组件库，大可不必如此耗费精力，可以借助业内专业的相关库，经过拼装调试，快速实现一个组件库。 本篇文章就来给大家介绍一下使用 create-react-app 脚手架、docz 文档生成器、node-sass、结合 Netlify 部署项目的整个开发组件库的流程，本着包教包会，不会没有退费的原则，来一场手摸手式教学，话不多说，让我们进入正题：
首先看一下组件库的最终效果：
本文将从以下步骤介绍如何搭建一个 React 组件库：
一、构建本地开发环境
开发一个组件库的首要步骤就是调试本地 React 环境，我们直接使用 React 官方脚手架 create-react-app，可以省去从底层配置 Webpack+TypeScript+React 的摧残：
1、使用 create-react-app 初始化脚手架，并且安装 TypeScript
npx create-react-app myapp --typescript
注意使用 node 为较高版本 >10.15.0
2、配置 eslint 进行格式化
由于安装最新的 create-react-app 结合 VScode 编辑器即可支持 eslit，但是需要在项目根目录中要添加 .env 这个配置文件，设置 EXTEND_ESLINT=true 这样才会启用 eslint 检测，注意要 重启 vscode
3、组件库系统文件结构
新建 styles 文件夹，包含了基本样式文件，结构如下：
|-styles
| |-variables.scss // 各种变量以及可配置设置
| |-mixins.scss // 全局 mixins
| |-index.scss // 引入全部的 scss 文件，向外抛出样式入口
|-components
| |-Button
| |-button.scss // 组件的单独样式
| |-button.mdx // 组件的文档
| |-button.tsx // 组件的核心代码
| |-button.test.tsx // 组件的单元测试文件
| |-index.tsx // 组件对外入口
4、安装 node-sass 处理器
安装 node-sass 用来编译 SCSS 样式文件：npm i node-sass -D
这样最基本的 react 开发环境就完成了，可以开心的开发组件了。
二、组件库打包编译
本地调试完组件库之后，需要打包压缩编译代码，供其他用户使用，这里我们用的 TypeScript 编写的代码，所以使用 Typescript 来编译项目： 首先在每个组件中新建 index.tsx 文件：
import Button from './button'
export default Button
修改 index.tsx 文件，导入导出各个模块
export { default as Button } from './components/Button'
在根目录新建 tsconfig.build.json，对 .tsx 文件进行编译：
{
"compilerOptions": {
"outDir": "dist",// 生成目录
"module": "esnext",// 格式
"target": "es5",// 版本
"declaration": true,// 为每一个 ts 文件生成 .d.ts 文件
"jsx": "react",
"moduleResolution":"Node",// 规定寻找引入文件的路径为 node 标准
"allowSyntheticDefaultImports": true,
},
"include": [// 要编译哪些文件
"src"
],
"exclude": [// 排除不需要编译的文件
"src/**/*.test.tsx",
"src/**/*.stories.tsx",
"src/setupTests.ts",
]
}
对于样式文件，使用 node-sass 编译 SCSS，抽取所有 SCSS 文件生成 CSS 文件：
"script":{
"build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
}
并且修改 build 命令：
"script":{
"clean": "rimraf ./dist",// 跨平台的兼容
"build": "npm run clean && npm run build-ts && npm run build-css",
}
这样，执行 npm run build 之后，就可以生成对应的组件 JS 和 CSS 文件，为后面使用者按需加载和部署到 npm 上提供准备。
三、本地调试组件库
本地完成组件库的开发之后，在发布到 npm 前，需要先在本地调试，避免带着问题上传到 npm 上。这时就需要使用 npm link 出马了。
什么是 npm link
在本地开发 npm 模块的时候，我们可以使用 npm link 命令，将 npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试。
使用方法
假设组件库是 reactui 文件夹，要在本地的 demo 项目中使用组件。则在组件库中（要被 link 的地方）执行 npm link，则生成从本机的 node_modules/reactui 到 组件库的路径 / reactui 中的映射关系。
然后在要使用组件库的文件夹 demo 中执行 npm link reactui 则生成以下对应链条：
在要使用组件的文件夹 demo 中 -[映射到]—> 本机的 node_modules/reactui —[映射到]-> 开发组件库 reactui 的文件夹 /reactui
需要修改组件库的 package.json 文件来设置入口：
{
"name": "reactui",
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
}
然后在要使用组件的 demo 项目的依赖中添加：
"dependencies":{
"reactui":"0.0.1"
}
注意，此时并不用安装依赖，之所以写上该依赖，是为了方便在项目中使用的时候可以有代码提示功能。 然后在 demo 项目中使用：
import { Button } from 'reactui'
在 index.tsx 中引入 CSS 文件
import 'reactui/build/index.css'
正当以为大功告成的时候，下面这个报错犹如一盆冷水从天而降：
经过各种问题排查，在 react 官方网站[3] 上查到以下说法：