背景

公司缺少一个通用的轻量级c端 H5 UI组件库。旧组件库当时是为了适用B、C两端，基本在同一个组件里面开发了两套代码，而且长期对组件无规范的修改，导致 组件库代码臃肿，不好维护，兼容性差。

技术

• Dumi
• React
• TypeScript

特点

• 轻量级
• 兼容性好
• 纯粹

搭建流程：

1. 根据 dumi 文档进行 初始化

2. 我们是基于react开发，所以选择React Library

3. 生成的项目目录有.dumirc.ts.fatherrc.ts.prettierrc.js等，解释一下。

4. src目录就是编写组件的地方。每个组件都在src里面新建一个文件，文件内有index.tsx\index.less\index.md， 解释一下。src下有一个index.ts,负责把所有组件模块export导出。

5. UI开发的组件库文档首页，主题、文案都可以自定义修改。例如：文案修改 docs 文件下的 index.md，主题结构可以在.dumirc里面配置。

6. 组件开发也要统一规范，例：

        项目使用 typescript
        文档生成使用 dumi - dumirc dumi 配置文件
        项目构建使用 father - fatherrc father 配置文件
        css 风格使用 umijs eslint - stylelintrc css 配置文件
        js 风格使用 umijs stylelint - eslintrc js 配置文件
   

7. 最后完善一些配置就差不多搭好了，例 package.json 的 publishConfig 中 registry 需要设置成我们公司的npm地址。

8. 命令行也是内置配置好的，build打包组件库输出到lib， docs:build 打包文档输出到dist。

图片组件

通用组件我们开发时通常会去保持它的纯粹性，单一性，不加太多额外的功能；

但是图片组件不太一样，因为我们的H5页面是C端的，会展示大量的商品图。所以就必须加一些额外的功能去提高它的加载性能

• 第一个是七牛云支持图片的裁剪，我们要支持图片组件使用时可以加一些特定参数，如 切割图片宽度width、图片质量quality、支持webp格式等，参数拼接时要遵守七牛云定义的规范。
• 第二个就是支持onload后做一些事情，像监听到低画质图快速渲染完毕后，请求原图片并替换为高清图，还有判断是否支持webp格式等。

Loading组件

loading组件中，因为我们需要获知哪个模块加载时间过长，就需要对loading时长进行监听上报。我们做法是：

 loading组件自身判断加载时长，超过两秒dispatch一个事件，然后在我们项目里面监听这个事件并上报。
 
 `
 js
    //组件dispatch事件：
    window.dispatchEvent(new CustomEvent('h5_loading_open'))
    window.dispatchEvent(new CustomEvent('h5_loading_hide'))
    
    //项目监听：
    let open_time: number;
    window.addEventListener("h5_loading_open", () => {
      open_time = new Date().getTime();
    });
    window.addEventListener("h5_loading_hide", () => {
      const costTime = new Date().getTime() - open_time;
      if (costTime > time) {
        const data = {
          yh_costTime: costTime,
          page_url: window.location.href,
        }
        this.handleReport(data)
      }
    });
 `
 

总结

归纳一下，组件库用的是React + dumi + ts 技术搭建并开发。一些配置参数需要自定义。组件开发尽可能保持功能纯粹，特定情况下也要视具体情况而定。