# react-components

**Repository Path**: tangshengjian/react-components

## Basic Information

- **Project Name**: react-components
- **Description**: react业务组件，基于ts，提升开发效率
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-11-18
- **Last Updated**: 2021-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 
# react-components

## 介绍
react-components 自定义组件，基于typescript，为了提高开发效率

## 安装教程

> 确保安装了`node`、`lerna`、`yarn`

```bash
npm install -g lerna

npm install -g yarn
```

+  安装依赖
```bash
lerna bootstrap
```

+ 启动
```bash
yarn docz:dev
```

## 开发说明
+ 新建package

```bash
lerna create package-a
```

+ 在新建的package-a下新建目录如下：
```
packages
    ├─package-a······························包名称
    │   ├─src································源文件
    │   │   ├─api····························请求接口
    │   │   ├─assets·························静态文件
    │   │   │  ├─fonts·······················字体
    │   │   │  └─images······················图片
    │   │   ├─components·····················组件
    │   │   ├─interfaces·····················接口
    │   │   ├─index.tsx······················组件入口
    │   │   └─styles·························css样式
    │   ├─package.json·······················包管理文件
    │   └─tsconfig.json······················ts配置文件
```
注意新建package目录建议和上述保持一致，避免build的错误。

+ 给`包安装依赖：
```bash
lerna add <package>[@version] [--dev]

# 给package-a安装依赖
lerna add classnames --scope=package-a
# 将 babel-core 安装到所有模块
lerna add babel-core
```

## 本地打包测试
```bash
# bash环境下
yarn run build
```

## 发布到npm上
+ 配置npm publish地址（可以改为自己的私有源仓库地址）：

`lerna.json`：
```json
{
  "command": {
    "publish": {
      "conventionalCommits": true,
      "registry": "https://www.npmjs.com/"
    }
  }
}

```

+ 发布

```bash
# 登录npm
npm login

lerna publish
```


> + [如何利用lerna来管理模块](https://blog.csdn.net/scq000123/article/details/87949042?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~top_click~default-1-87949042.nonecase&utm_term=lerna&spm=1000.2123.3001.4430)
>
>
> + [lerna管理前端packages的最佳实践](https://blog.csdn.net/qq_37653449/article/details/101241968?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.not_use_machine_learn_pai)