如何二次封装组件库

Author Avatar
Peipei Wong 6月 16, 2019
  • 在其它设备中阅读本文章

前言

现在已经有好多成熟的组件库,公司使用的是antd,但是样式和设计那边的有些出入。在快速迭代下,根本就没有精力去实现设计的要求,另外,每个人负责的也是不太相交的业务,所以即使你改了别人也不甚清楚,又是为了求速度,也是直接套用之前的样式,没有及时抽成组件,每个人写的也不兼容,直接后果就是导致项目越来越脏。

于是现在的一个方案是做一个基于antd的组件库。其实刚开始想的是一个组件一个组件的封装,但是这样的结果就是改每个地方的组件引用,虽然编辑器已经很优秀了,但是需要改动的地方实在是太多了。于是第二个方案出现了,我先做一个基于antd封装的组件库,打成包,组件慢慢的实现。如果遇见antd的升级的情况,就去升级自己的组件库,这样对于现在的开发项目其实是一个无感知的迁移。想来,第二个方案是一个最有选择。

如何封装呢

大家都知道antd有一个按需加载,我也想我的组件库也有。怎么办呢?那我的文件组织和antd的一样,在webpack配置中只需要改一下name即可。

我看了antd的项目,发现在它的pacakge.json中的运行命令已经很完美了,如果我使用了它的所有配置,我又可以省好多精力了。

说到这里,相信你已经有些想法了。是的,继续往下…

实施

首先去antd的项目里面下载zip包。antd中的组件都在components文件夹,那么我们也只需要更改这个文件夹了,至于其他的文件,你不需要的就可以删除,

1. 更改项目的依赖

package.json中依赖全部删除,增加antd

2.封装组件

affix举例,更改affix文件夹中的style/index.lessindex.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.lessindex.tsx这两个文件即可。

结语

现在的组件库的文件组织都已经很清晰了,这次的研究其实是一个通用方法,以后遇到其他的组件库改造,这个方法也适用。

另外因为我没有研究更改组件这个开发过程….难道我要在另外一个项目中开发完,再复制粘贴到style/index.lessindex.tsx中吗?感觉蠢蠢的,一定还有更好的方法去解决。