如何二次封装组件库
前言
现在已经有好多成熟的组件库，公司使用的是antd，但是样式和设计那边的有些出入。在快速迭代下，根本就没有精力去实现设计的要求，另外，每个人负责的也是不太相交的业务，所以即使你改了别人也不甚清楚，又是为了求速度，也是直接套用之前的样式，没有及时抽成组件，每个人写的也不兼容，直接后果就是导致项目越来越脏。
于是现在的一个方案是做一个基于antd的组件库。其实刚开始想的是一个组件一个组件的封装，但是这样的结果就是改每个地方的组件引用，虽然编辑器已经很优秀了，但是需要改动的地方实在是太多了。于是第二个方案出现了，我先做一个基于antd封装的组件库，打成包，组件慢慢的实现。如果遇见antd的升级的情况，就去升级自己的组件库，这样对于现在的开发项目其实是一个无感知的迁移。想来，第二个方案是一个最有选择。
如何封装呢
大家都知道antd有一个按需加载，我也想我的组件库也有。怎么办呢？那我的文件组织和antd的一样，在webpack配置中只需要改一下name即可。
我看了antd的项目，发现在它的pacakge.json中的运行命令已经很完美了，如果我使用了它的所有配置，我又可以省好多精力了。
说到这里，相信你已经有些想法了。是的，继续往下…
实施
首先去antd的项目里面下载zip包。antd中的组件都在components文件夹，那么我们也只需要更改这个文件夹了，至于其他的文件，你不需要的就可以删除，
1. 更改项目的依赖
将package.json中依赖全部删除，增加antd
2.封装组件
拿affix举例，更改affix文件夹中的style/index.less和index.tsx
// index.less
@import '~antd/lib/affix/style/index';
// index.tsx
import Affix from 'antd/lib/affix';
export default Affix;
其他组件类推。
3.编译
package.json中有compile命令，执行一下就有es5的代码了，这个时候你就可以去发布自己的包了。
4.更改组件
如果更改组件的话，只需要去更改style/index.less和index.tsx这两个文件即可。
结语
现在的组件库的文件组织都已经很清晰了，这次的研究其实是一个通用方法，以后遇到其他的组件库改造，这个方法也适用。
另外因为我没有研究更改组件这个开发过程….难道我要在另外一个项目中开发完，再复制粘贴到style/index.less和index.tsx中吗？感觉蠢蠢的，一定还有更好的方法去解决。