ant组件库 ant插件

您好,今天小周来为大家解答以上的问题。ant组件库相信很多小伙伴还不知道,现在让我们一起来看看吧！

ant组件库 ant插件

ant组件库 ant插件

1、解决方案：这次给大家带来怎样使用React进行组件库的开发，使用React进行组件库的开发的注意事项有哪些，下面就是实战案例，一起来看一下。

2、最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。

3、由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。

4、概述我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，这也是我们要进行本组件库开发的原因。

5、然而现有React开源组件有很多，像ant-design和material-ui等等，是否需要花费精力打造适合自身团队的组件库往往需要酌情考虑。

6、我们来看下我现有团队及业务的几个特点：前端人员较多，需要相互协作，且有余力对组件进行开发产品业务相对复杂，需对某些组件进行定制化开发已经有成熟的设计规范，针对各种基础组件、基础样式等进行定义可以看出，我们拥有封装自己组件的精力和基础，并且拥有通过基础组件封装改变目前开发现状的需求。

7、所以，这件事情是我们应该并且需要尽快完成的事情。

8、技术选型针对组件库的封装，我们首先面对的是技术选型以及方案的规划。

9、大概包括以下两点：最基本的技术方案开发流程和规范技术方案选择Webpack + React + Sass由于团队现有的项目都是基于React+Redux进行开发的，那我们选择的开发语言无疑是React。

10、SASS针对css选择，虽然现在针对组件化开发，比较流行CSS Modules和CSS-IN-JS两中模块化解决方案，我们更希望我们的组件是可进行定制的。

11、因此针对组件，我们以Sass作为预编译语言，提搞效率和规范性。

12、配合css-modules，我们可以很方便的进行针对实际需求进行样式更改。

13、例如我们有一个Tab组件，我们已经定义好了其通用的样式：.tip-tab {border: 1px solid #ccc;border: 1px solid #ccc;&.active {border-color: red;}}而在业务中，针对某一个需求，我们需要针对Tab组件的样式进行微调。

14、让其在激活(active)状态下border-color是蓝色的。

15、你当然可以说，我们可以让我们的组件暴露出一些props，针对这些修改进行配置，传入不同的props对应不同的风格。

16、但是我们往往无法满足所有的业务需求，不可能针对组件把各种样式都封装进去。

17、针对这种方案，我们采用css-modules为其添加的模块样式：针对该模块，对其进行基本样式的修改:.unique-tab {:global {.tip-tab-itreturn class extends Component {em {border-color: #eee;&.active {border-color: blue;}}}}这样，针对该模块的定制样式，能很好的进行针对需求的样式定制，同时不对全局样式进行污染。

18、Icon针对项目图标，使用svg-sprite方案。

19、但是由于产品处于在不断迭代的过程中，新的图标不断在增加。

20、目前我们并不会对图标统一进行打包，而是在每次进行组件打包的过程中，从项目中导入所有的图标。

21、用以下方式进行引入：import Icon from '@common/lib'import errorIcon from '@images/error.svg'其实更好的方式是针对所有的图标进行统一打包，生成svg-spirte文件(具体原理可以查询svg-sprite,在此不再赘述)。

22、当我们进行使用时，只需直接引用即可，避免每次都进行打包，减少webpack处理依赖的时间：开发流程和规范针对开发流程和规范，我们遵循以下几个原则：组件库完全于项目进行开发，便于后续多个项目进行使用等组件库包含三种模式：开发，测试，打包，文档案例，区分不同的入口及状态使用pure-renderautobind等尽可能保证组件的性能及效率保证props和回调的语义性，如回调统一使用handleXXX进行处理为了便于后续的扩展，我们更希望整个组件库完全脱离于项目进行开发。

23、保证组件库仅对于最基本的组件进行封装，将项目UI代码与业务逻辑进行分离。

24、针对不同的模式下，我们有不同的文件入口，针对开发模式，我们启动一个dev-server, 在里面对组件进行基本的封装，并进行调试。

25、打包时，我们只需对组件内容进行封装，暴露统一的接口。

26、在文档中，我们需要进行案例和说明的展示。

27、所以我们在利用webpack的特性进行各种环境的配置：npm run dev //同时，由于我们的组件库处于一个不断维护的状态。

28、这就需要我们维持好项目库和项目之间的打包关系，具体的流程如图所示： 开发npm run test // 测试npm run build // 构建npm run styleguide:build // 文档打包组件库作为项目的最小力度支持，我们需要保证其最基本的渲染效率，因此我们采用pure-render/autobind等对其进行基本的优化。

本文到这结束，希望上面文章对大家有所帮助。