如何从零开始构建一个基于React TypeScript的组件库并集成Ant Design？

本文共计4700个文字，预计阅读时间需要19分钟。

为什么会有这样一篇文章？因为网上的教程/示例只说了怎么做，没有系统详细的介绍引入这些依赖、为什么要这样配置，以至于有些文章还是错误的！急于技术洁癖，我希望有更多的开发小能手！

为什么会有这样一篇文章？因为网上的教程/示例只说了怎么做，没有系统详细的介绍引入这些依赖、为什么要这样配置，甚至有些文章还是错的！迫于技术洁癖，我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节，做到面对对于工程出现的错误能够做到有把握。

最近使用阿里低开引擎的时候，想要封装一套组件库作为物料给低开引擎引入。根据低开引擎的物料封层模式，我的诉求是做一套组件库，并且将该组件库以umd方式生成。当然，从零开始开发组件库也是一个比较耗时耗力的事情，所以我想到将antd组件封装，于是催生出了本篇文章。

在封装组件并生成umd代码过程中，踩了很多的坑，也更加系统的了解了babel。

整体需求

1. react组件库，取名r-ui，能够导出r-ui.umd.js和r-ui.umd.css。
2. 代码使用typescript进行开发。