详解使用React进行组件库开发


Posted in Javascript onFebruary 06, 2018

最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因,在这里只对开发过程中比较纠结的选型和打包等进行讨论,后续再对具体组件的封装进行讨论。

概述

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

然而现有React开源组件有很多,像ant-design和material-ui等等,是否需要花费精力打造适合自身团队的组件库往往需要酌情考虑。我们来看下我现有团队及业务的几个特点:

  1. 前端人员较多,需要相互协作,且有余力对组件进行开发
  2. 产品业务相对复杂,需对某些组件进行定制化开发
  3. 已经有成熟的设计规范,针对各种基础组件、基础样式等进行定义
  4. 目前的项目较为凌乱,第三方组件引用杂乱无章

可以看出,我们拥有封装自己组件的精力和基础,并且拥有通过基础组件封装改变目前开发现状的需求。所以,这件事情是我们应该并且需要尽快完成的事情。

技术选型

针对组件库的封装,我们首先面对的是技术选型以及方案的规划。大概包括以下两点:

  1. 最基本的技术方案
  2. 开发流程和规范

技术方案选择

Webpack + React + Sass

由于团队现有的项目都是基于React+Redux进行开发的,那我们选择的开发语言无疑是React。

SASS

针对css选择,虽然现在针对组件化开发,比较流行CSS Modules和CSS-IN-JS两中模块化解决方案,我们更希望我们的组件是可进行定制的。因此针对组件,我们以Sass作为预编译语言,提搞效率和规范性。配合css-modules,我们可以很方便的进行针对实际需求进行样式更改。例如我们有一个Tab组件,我们已经定义好了其通用的样式:

.tip-tab {
 border: 1px solid #ccc;
}
.tip-tab-item {
 border: 1px solid #ccc;
 
 &.active {
  border-color: red;
 }
}

而在业务中,针对某一个需求,我们需要针对Tab组件的样式进行微调。让其在激活(active)状态下border-color是蓝色的。你当然可以说,我们可以让我们的组件暴露出一些props,针对这些修改进行配置,传入不同的props对应不同的风格。但是我们往往无法满足所有的业务需求,不可能针对组件把各种样式都封装进去。针对这种方案,我们采用css-modules为其添加唯一的模块样式:

<Tab styleName="unique-tab" />

针对该模块,对其进行基本样式的修改:

.unique-tab {
 :global {
   .tip-tab-item {
    border-color: #eee;
    
    &.active {
     border-color: blue;
    }
   }
 }
}

这样,针对该模块的定制样式,能很好的进行针对需求的样式定制,同时不对全局样式进行污染。

Icon

针对项目图标,计划使用svg-sprite方案。但是由于产品处于在不断迭代的过程中,新的图标不断在增加。目前我们并不会对图标统一进行打包,而是在每次进行组件打包的过程中,从项目中导入所有的图标。用以下方式进行引入:

import Icon from '@common/lib'
import errorIcon from '@images/error.svg'

<Icon link={errorIcon} />

其实更好的方式是针对所有的图标进行统一打包,生成svg-spirte文件(具体原理可以查询svg-sprite,在此不再赘述)。当我们进行使用时,只需直接引用即可,避免每次都进行打包,减少webpack处理依赖的时间:

<Icon type="error" />

开发流程和规范

针对开发流程和规范,我们遵循以下几个原则:

  1. 组件库完全独立于项目进行开发,便于后续多个项目进行使用等
  2. 组件库包含三种模式:开发,测试,打包,文档案例,区分不同的入口及状态
  3. 使用pure-renderautobind等尽可能保证组件的性能及效率
  4. 保证props和回调的语义性,如回调统一使用handleXXX进行处理

为了便于后续的扩展,我们更希望整个组件库完全脱离于项目进行开发。保证组件库仅对于最基本的组件进行封装,将项目UI代码与业务逻辑进行分离。

针对不同的模式下,我们有不同的文件入口,针对开发模式,我们启动一个dev-server, 在里面对组件进行基本的封装,并进行调试。打包时,我们只需对组件内容进行封装,暴露统一的接口。在文档中,我们需要进行案例和说明的展示。所以我们在利用webpack的特性进行各种环境的配置:

npm run dev // 开发
npm run test // 测试
npm run build // 构建
npm run styleguide // 文档开发
npm run styleguide:build // 文档打包

组件库作为项目的最小力度支持,我们需要保证其最基本的渲染效率,因此我们采用pure-render/autobind等对其进行基本的优化。React有很多优化方式,在此不进行赘述。

打包

基础

针对组件库的打包,我们以UMD格式对其进行打包。webpack可以针对输出进行格式设置:(引自cnode)

  1. “var” 以变量方式输出
  2. “this” 以 this 的一个属性输出: this[“Library”] = xxx;
  3. “commonjs” 以 exports 的一个属性输出:exports[“Library”] = xxx;
  4. “commonjs2” 以 module.exports 形式输出:module.exports = xxx;
  5. “amd” 以 AMD 格式输出;
  6. “umd” 同时以 AMD、CommonJS2 和全局属性形式输出。

配置如下:

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].js'),
 chunkFilename: utils.assetsPath('js/[id].js'),
 library: 'TipUi',
 libraryTarget: 'umd'
}

依赖

很明显,我们封装的是一个针对React的组件库,并不应该把React引用进去。一般我们可以采用externals的方式对其进行处理。

在这里, 我们采用dll方式将其与其他第三方依赖统一进行打包,并将manifest.json和三方依赖的输出文件输出到项目中去,在项目中也使用dllReference进行引用。避免在项目中使用到这些依赖时重复进行打包。

同时,由于我们的组件库处于一个不断维护的状态。这就需要我们维持好项目库和项目之间的打包关系,具体的流程如图所示:

详解使用React进行组件库开发

在每次进行项目打包的时候,首先检测UI库是否有更新,若没有更新,则直接进行打包。反之继续检测dll的依赖是否有变化,若有,则打包dll,否则直接打包组件库内容。然后将输出结果同步到项目中,再进行最终打包。

当然,以上的这些流程都是自动进行的。

文档和示例

一个完善的文档对于一个组件库是及其重要的,每个组件有什么样的配置参数,拥有哪些事件回调,对应的Demo和展示效果。假设没有这些,除了封装组件的人,没有人知道它该如何使用。但是写文档的过程往往是痛苦的,在这里推荐几个文档生成库,可以极大的简化文档工作:

docsify 基于Vue的组件生成器,轻量好用
react-styleguidist 基于React的组件库文档生成器,自动根据注释生成文档,支持Demo展示。超好用
bisheng ant design自己写的文档生成器

我们使用的styleguidist, 可以将md自动转化为文档,支持在md内直接调用你封装好的组件并进行展示,简单好用。最后封装的文档大概长这样:

详解使用React进行组件库开发

总结

其实封装组件库这种工作有很多的东西值得琢磨和钻研,由于篇幅原因,在这里只对开发过程中比较纠结的选型和打包等进行讨论,后续再对具体组件的封装进行讨论。在书写的同时,不断参考下ant design这种优秀的组件库,能学到很多的东西。更深刻的理解封装组件的思想,是一个很好的过程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
fullpage.js最后一屏滚动方式
Feb 06 #Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 #Javascript
微信小程序使用Promise简化回调
Feb 06 #Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 #Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 #Javascript
vue一个页面实现音乐播放器的示例
Feb 06 #Javascript
使用百度地图实现地图网格的示例
Feb 06 #Javascript
You might like
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python创建xml的方法
2015/03/10 Python
python实现上传下载文件功能
2020/11/19 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
虚拟机下载python是否需要联网
2020/07/27 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
党支部活动策划方案
2014/08/18 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
社区端午节活动总结
2015/02/11 职场文书
日元符号 ¥
2022/02/17 杂记
springboot读取nacos配置文件
2022/05/20 Java/Android
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS