Deer-ui:一个简单高效的react组件库

1、前言

自己一直想搭建一套自己的博客系统，今年年末终于有时间开发，在开发后台cms系统时，使用antd组件库，突然一天问自己，组件库是怎么实现的，内部是怎么运行的，打包部署是怎么个原理，带着这些疑问，我开始萌生了自己开发一套组件库的想法。说干就干，自己花费了大概2个多月的时间完成了deer-ui第一版的组件开发，现在分享出来，记录下开发过程踩过的坑。

源码deer-ui | 官网预览地址

2、组件库开发准备工作

需求准备

首先确定需求，初期先调研了流行的组件库，如antd，vant，zarm-web,cuke-ui,iview等等，最后选定antd作为ui参考。

技术准备

• 组件库预览网站技术选择，对比了几个(docz,styleguidist,storebook)，最后选择storebook作为展示网站,不仅限于此，项目中还集成了docz,styleguidist打包，如有需要可实现。
• 组件调试方案，最后确定了两种，可按需求。1、使用源码中使用create-react-app搭建了一个react环境，在example文件夹下，使用npm run dev，即可打开调试环境，引入编写的组件即可.
  2、源码中搭建了一套组件库的文档部署环境，使用命令npm run storybook，即可进入文档模式，引入编写的组件即可.
• 组件库代码打包，在参考几大流行的组件库后，决定自己手写打包配置文件
• 打包发版，组件库引入自动化发版，运行脚本后直接发布npm仓库
• 一期组件分类，由于时间原因不可能一次性开发完全部的组件，所以一期准备开发下面16个组件

3、搭建项目

3.1 项目结构

• .storebook storebook 的一些配置
• components 放置所有组件
• example 组件调试环境代码
• scripts 发布,打包的脚本文件
• stories 项目静态文档,负责 demo 演示
• 以及一些配置文件

3.2 打包脚手架开发

使用webpack4完成组件库的打包，组件库用户一般通过es module，commonjs以及script脚本的方式引入，这就需要我们的组件库满足这些规范，通常使用webpack打包成umd规范即可满足上面不同的引入。

  ...
  mode: "production",
  entry: {
    [name]: ["./components/index.js"]   
  },
  output: {
    path: path.join(process.cwd(), "dist"),
    library: name,
    libraryTarget: "umd",
    umdNamedDefine: true,
    filename: "index.js",
  },
  ...

打包的入口是components/index.js文件,主要是导出组件

export { default as Button } from './button';
export { default as Tabs } from './tabs';
export { default as Icon } from './icons';

最后打包后会在dist目录下生成index.js文件，为所有打包后组件。webpack其他配置不一一详述了，如有需要查看scripts目录。

3.3按需加载组件打包

3.3.1 打包js文件

通过上述webpack打包的组件库代码，是全量引入的，