如何开发React UI组件库

github.com/onfuns/wui

技术栈：React + Webpack + TypeScript + Docz

先上脚手架目录结构

docz
example
lib
scripts
src

注意：本脚手架只是基本配置，内部代码比较简洁，主要是起到一个学习引导作用。

组件开发过程中没什么技术难点，主要是样式处理。 全局 default.less 样式处理借鉴了 antd ,将常用的样式用变量存储，方便后续主题设置

@wui-prefix: wui;

@primary-color: red;
@info-color: #3bb4f2;
@success-color: #5eb95e;
@danger-color: #dd514c;
@warning-color: #f37b1d;
@white: #fff;
@black: #000;

@alert-info-bg-color: @info-color;
@alert-success-bg-color: @success-color;
@alert-warning-bg-color: @warning-color;
@alert-danger-bg-color: @danger-color;
复制代码

mixins/alert.less 混合用函数注入变量

.var-alert(@background-color, @border-corlor, @text-color) {
  border: 1px solid @border-corlor;
  background-color: @background-color;
  color: @text-color;
}

复制代码

然后组件 components/alert/index.less 中直接引入即可

@import '../style/default.less';
@import '../style/mixins/alert.less';

@alert-prefix-cls: ~'@{wui-prefix}-alert';

.@{alert-prefix-cls} {
  position: relative;
  padding: 8px 16px;
  margin-bottom: 10px;

  &-info {
    .var-alert(@alert-info-bg-color, @alert-info-bg-color, @white);
  }

  &-success {
    .var-alert(@alert-success-bg-color, @alert-success-bg-color, @white);
  }

  &-warning {
    .var-alert(@alert-warning-bg-color, @alert-warning-bg-color, @white);
  }

  &-danger {
    .var-alert(@alert-danger-bg-color, @alert-danger-bg-color, @white);
  }
}

复制代码

构建过程中， less 文件无需转换为 css 文件，只需通过脚本遍历文件夹同步到对应目录下即可， build-less.js 代码：

const readFiles = async (filePath, name, callback) => {
  const files = fs.readdirSync(filePath)
  files.forEach(file => {
    const filedir = path.join(filePath, file)
    fs.stat(filedir, (error, stats) => {
      if (error) {
        return console.error('stats error:', error)
      }
      if (stats.isFile() && filedir.indexOf(name) > -1) {
        callback && callback(filedir)
      } else if (stats.isDirectory()) {
        readFiles(filedir, name, callback)
      }
    })
  })
}


const componentsPath = 'src/components'
readFiles(
  path.join(__dirname, '../', componentsPath),
  '.less',
  (file, error) => {
    if (error) {
      return console.error('read files error:', error)
    }
    fs.outputFileSync(
      file.replace(componentsPath, 'lib'),
      fs.readFileSync(file)
    )
  }
)
复制代码

文档界面：

贴一段 Alert 组件简易代码

import React, { Component } from 'react'
import classNames from 'classnames'
import { getPrefix } from '../util/method'
import './index.less'

interface AlertProps {
  type?: 'success' | 'error' | 'warn' | 'info'
  message: React.ReactNode
  className?: string
}

export default class Alert extends Component<AlertProps> {
  render() {
    const { type = 'info' } = this.props
    const prefix = getPrefix('alert')
    const className = classNames(prefix, `${prefix}-${type}`)
    return <div className={className}>{this.props.message}</div>
  }
}

复制代码

在本地开发及测试完组件后需要发布到仓库测试，不建议发布到npm官方仓库中，因为毕竟是半成品，可以使用 verdaccio 在本地搭建一个私有仓库进行测试

搭建私有参考可以参考 使用verdaccio搭建私有npm仓库