從零到一搭建React組件庫

最近一直在搗鼓如何搭建實用的組件庫，至於爲何會產生這個想法，主要是由於組件庫對於前端生態來講究極重要，每個着眼於長遠發展的互聯網公司基本上都會量身定製組件庫，它的好處不用多說，讀者們在使用中或多或少都會體會到一些優勢，若是之前作過MVC，那麼對於這一點的體會確定更加深入。一款組件庫如此之重要，做爲一名前端工程師應該去深刻的瞭解，爲之後任務開發、職業發展賦能。

大體來講，開發一款組件庫一般會有如下幾點好處：

1. 統一產品設計體驗
2. 提升團隊協做效率
3. 下降開發成本

功能需求

在作任何一件事情以前都應該捋清楚咱們的初衷，也就是咱們的需求是什麼，凡事預則立，不預則廢。

這裏撇開業務上的需求，由於這篇文章沒有基於業務場景去考慮。只梳理一些功能上需求，也就是如何搭建一個高性能、高實用、高標準的React組件庫。

需求清單：

• 知足ES Module、CommonJS、AMD、CMD模塊引入方式
• 支持按需加載

技術選型~~~~

環境搭建

搭建組件庫首先咱們來搭建工程環境，這裏咱們不採用create-react-app腳手架來搭建，由於腳手架封裝好了不少東西，而有些東西對於組件庫並不適用，用來搭建組件庫過於臃腫。所以，我準備從零到一搭建React組件庫。

首先，先建立一個工程文件夾，執行npm init命令生成package.json；執行tsc --init生成tsconfig.json

而後，按以下結構組織工程的目錄結構：

pony-react-ui
    - src
        - assets  // 存放靜態文件，好比圖片、文字等
        - components // 組件
        - styles // 組件樣式
        - index.ts // 主文件入口
        - style.ts // 樣式文件入口
    - package.json // 依賴管理
    - tsconfig.json // ts配置
    - webpack.config.js // webpack配置

如何組織組件

在components文件夾下以以下方式組織組件，好比建立一個Button組件

- components
    - Button
        - Button.tsx // 按鈕組件
        - index.tsx // 組件入口
    - Dialog
        - Dialog.tsx
        - index.tsx

Button.tsx

import React from 'react';
import classNames from 'classnames';

export interface IButtonProps {
  onClick?: React.MouseEventHandler;
  // 類型
  primary?: boolean;
  secondary?: boolean;
  outline?: boolean;
  dashed?: boolean;
  link?: boolean;
  text?: boolean;
  // 尺寸
  xLarge?: boolean;
  large?: boolean;
  small?: boolean;
  xSmall?: boolean;
  xxSmall?: boolean;
  // 顏色
  success?: boolean;
  warn?: boolean;
  danger?: boolean;
  // 禁用狀態
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

export const Button = (props: IButtonProps) => {
  const {
    className: tempClassName,
    style,
    onClick,
    children,
    primary,
    secondary,
    outline,
    dashed,
    link,
    text,
    xLarge,
    large,
    small,
    xSmall,
    xxSmall,
    success,
    danger,
    warn,
    disabled,
  } = props;
  
  
  const className = classNames(
    {
      'pony-button': true,
      'pony-button-primary': primary,
      'pony-button-secondary': secondary && !text,
      'pony-button-outline': outline,
      'pony-button-dashed': dashed,
      'pony-button-link': link,
      'pony-button-text': text && !secondary,
      'pony-button-text-secondary': secondary && text,
      'pony-button-round': round,
      'pony-button-rectangle': noRadius,
      'pony-button-fat': fat,
      'pony-button-xl': xLarge,
      'pony-button-lg': large,
      'pony-button-sm': small,
      'pony-button-xs': xSmall,
      'pony-button-xxs': xxSmall,
      'pony-button-long': long,
      'pony-button-short': short,
      'pony-button-success': success,
      'pony-button-warn': warn,
      'pony-button-danger': danger,
      'pony-button-disabled': disabled,
    },
    tempClassName
  );
  
  return (
    <button 
      type="button"
      className={className}
      style={style}
      onClick={onClick}
      disabled={disabled}>
      <span className="pony-button__content">{children}</span>
    </button>
  );
}

在index.tsx拋出組件以及該組件的類型聲明

export * from './Button';

如何組織樣式

- styles
    -

我把組件的樣式都存放在/src/styles文件夾中，除了存放各個組件樣式以外，另外建立_minxin.scss