最近始终在捣鼓如何搭建实用的组件库，至于为什么会产生这个想法，次要是因为组件库对于前端生态来说究极重要，每一个着眼于久远倒退的互联网公司基本上都会量身定制组件库，它的益处不必多说，读者们在应用中或多或少都会领会到一些长处，如果以前做过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