从零到一搭建React组件库
作者：ToSmile
来源：Segmentfault 思否
最近一直在捣鼓如何搭建React组件库，至于为什么会产生这个想法，主要是因为组件库对于前端生态来说究极重要，每一个着眼于长远发展、看重开发效率的的互联网公司基本上都会量身定制自己的组件库，它的好处不用多说。对于前端工程师而言，去理解以及掌握它，可以让我们在今后的工作中以及应聘过程中多出一项特殊技能，并且对自身的纵向发展也就是很有利的。下面是我记录我在搭建组件库的过程。
初始化工程
搭建工程不打算采用 create-react-app 脚手架来搭建，因为脚手架封装好了很多东西，而有些东西对于组件库并不适用，用来搭建组件库过于臃肿，因此我不打算借助任何脚手架来搭建工程。
首先，先创建一个工程文件夹 pony-react-ui，在该文件夹下执行如下命令：
npm init // 生成package.json
tsc --init // 生成tsconfig.json
然后，按照如下目录结构初始化工程：
pony-react-ui
├── src
├── assets
├── components
├── Button
├── Button.tsx
└── index.ts
└── Dialog
├── Dialog.tsx
└── index.ts
├── styles
├── _button.scss
├── _dialog.scss
├── _mixins.scss
├── _variables.scss
└── pony.scss
└── index.ts // 打包的入口文件，引入pony.scss，抛出每一个组件
├── index.js // 入口文件，package.json中main字段指定的文件
├── package.json
├── tsconfig.json
├── webpack.config.js
└── README.md
编写一个Button组件
Button组件应该满足一下需求：
不同尺寸 不同类型 不同颜色 禁用状态 点击事件
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>
);
}
export * from './Button';
// 单独引入组件样式
import { Button } from 'pony-react-ui';
import 'pony-react-ui/lib/styles/button.scss';
// 全局引入组件样式，打包时抽离出来的样式
import 'pony-react-ui/lib/styles/index.scss';
import { Button } from 'pony-react-ui';
import 'pony-react-ui/lib/styles/button.scss';
import styles from './index.module.scss';
const Demo = () => (
<div className={styles.btnBox}>
<Button onClick={submit}>submit</Button>
</div>
)
<style type="text/css">
// Button.scss的样式
</style>
<style type="text/css">
// index.module.scss的样式
</style>
编写样式
├── styles
├── _button.scss
├── _dialog.scss
├── _mixins.scss
├── _variables.scss
└── pony.scss
// _mixins.scss
@mixin colors($text, $border, $background) {
color: $text;
background-color: $background;
border-color: $border;
}
// 设置按钮大小
@mixin button-size($padding-x, $height, $font-size) {
height: $height;
padding: 0 $padding-x;
font-size: $font-size;
line-height: ($height - 2);
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
$button-font-size: 14px !default;
$button-xl-font-size: 16px !default;
$button-lg-font-size: 16px !default;
$button-sm-font-size: 12px !default;
@import 'variables';
@import 'mixins';
@import 'button';
@import 'dialog';
...
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
loader: 'css-loader',
options: {
modules: false // 禁止css modules
}
]
}
]
<Button className="btn">按钮</Button>
// 修改Button内部样式，假如组件内部样式有个样式类名为pony-button-promary
.btn {
:global {
.pony-button-promary {
color: #da2227;
}
}
}
.btn {
:global {
// 下次修改Button组件构建后，生成的hash不一定为sadf6756
.pony-button-promary-sadf6756 {
color: #da2227;
}
}
}
打包输出UMD规范
打包输出es module规范
docz生成组件使用文档
发布到npm仓库
评论