react组件库

开发一个组件的过程

• 添加一个组件到组件库（以下命令三选一）

npm run addComponent -- -name=component-name
node ./add -name=component-name
yarn addComponent -name=component-name

• 在 lib/index.js 中添加下面代码以导出组件

export { default as ComponentName } from './component-name';

• 在 lib/styles/index.scss 中添加下面代码

@import '../component-name/style/index.scss';

• 一个组件示例

必须要有属性类型检测来确保组件的规范性和避免隐形问题出现等

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// 基础组件库使用 antd
import { Button } from 'antd';

class ComponentName extends Component {
  render() {
    return (
      <div>ComponentName</div>
    )
  }
}

// 默认属性值
ComponentName.defaultProps = {
  propName: 6
}

// 属性类型检测
ComponentName.propTypes = {
  propName: PropTypes.number
}

export default ComponentName;

bash命令（npm 或 yarn）

• 添加组件

npm run addComponent

• 文档开发

npm run doc:dev

• 类项目开发（可不用，直接通过文档测试组件）

npm run dev

其它

• 文档开发可自动读取 lib 组件下的 Readme.md 文件，并自动编译其中包含的代码到文档页面中，以达到测试目的

• 删除一个组件的时候手动把 lib/index.js 和 lib/styles/index.scss 中对应的该组件代码删除