React UIコンポーネントライブラリの開発方法

github.com/onfuns/wui
技術スタック:React+Webpack+Type Script+Docz
先頭足場ディレクトリ構造

docz:doczドキュメントジェネレータの構成ディレクトリ

example:demoディレクトリ

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倉庫の構築を参照できます
転載先:https://juejin.im/post/5cd65491518825692330d2ef