详解使用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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JS获取时间的方法
Jan 21 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
微信小程序实现电子签名功能
2020/07/29 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
使用requests库制作Python爬虫
2018/03/25 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
实习教师自我鉴定
2013/12/12 职场文书
员工工作表扬信范文
2014/01/13 职场文书
法学求职信
2014/06/22 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书