# hc-button

> A react button component of Haici Technology

Latest version **1.0.6** (published 2020-06-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install hc-button
pnpm add hc-button
yarn add hc-button
bun add hc-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-06-18 |
| First published | 2020-06-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CHEN Yue |
| Maintainers | yuechen195 |
| Keywords | react, component, button, Haici Technology |

## Links

- npm: https://www.npmjs.com/package/hc-button
- npm.io page: https://npm.io/package/hc-button

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2020-06-18
- 1.0.5 — 2020-06-18
- 1.0.4 — 2020-06-18
- 1.0.3 — 2020-06-18
- 1.0.2 — 2020-06-17
- 1.0.1 — 2020-06-16
- 1.0.0 — 2020-06-16

## README

# React组件模板使用说明


## 项目介绍

该组件模板用来创建一个用于发布到npm的React组件，支持typescript，sass，less，css modules。

## 技术栈

```
react@16 + webpack@4
```

## 快速开始

```shell
npm install hcfed-cli -g
npx hcfed-cli <your component name>
```

选择生成React组件，并选择npm为依赖安装工具，等待依赖安装完毕。

hcfed-cli是一个前端项目CLI工具，用来生成前端项目模板，具体说明：<http://192.168.11.202/fe-support/generator/>


## 项目结构

1. 目录结构

```
|--config     //webpack配置文件夹
     |--webpack.base.js     //webpack基础配置，开发和打包时均生效
     |--webpack.dev.config.js     //运行本地服务时（开发）生效的webpack配置
     |--webpack.prod.config.js     //打包时的webpack配置
|--example     //样例文件夹
     |--src     //样例源代码
          |--app.js(x)     //开启本地服务时的入口文件
          |--index.html     //html模板
          |--style.less     //样例的样式文件
|--lib     //编译输出，此目录下的文件会被上传到npm
   |--index.js     //编译后的JS文件
   |--main.min.css     //编译后的样式文件
|--node_modules     //npm包
|--src     //组件源代码
     |--index.t(j)sx     //打包时的入口文件，用户import的是这个文件export的内容
     |--style.scss（less）     //组件样式文件
|--.babelrc     // .babelrc 配置文件
|--.gitignore        // git忽略项
|--.npmignore        // 上传npm的忽略项
|--package.json        // 依赖管理
|--postcss.config.js        // postcss配置文件
|--README.md        // 组件说明文档
|--tsconfig.json        // ts配置文件
```

2. 项目结构说明
  1. 开发组件的时候在example的src中遍写demo，此文件夹下的代码用作调试，不会被webpack打包也不会上传npm。注意：入口文件名仅可为：app.js(x)，app.ts(x)。
  2. webpack中已默认开启css-modules，如果不需要可自行关闭。
  3. 组件进行编译的时候入口文件是src目录下的，index.js(x)或者index.ts(x)。


## 本地运行

```shell
npm run start
```

## 编译打包

```shell
npm run build
```

## 功能验证

```shell
npm run build
npm link
cd example/src
npm link <yout component name>
```

在测试完成并且准备发包之前应该对组件的功能进行验证，执行以上命令把打包后的组件引入全局node_modules中并且链接到example/src文件夹下，此时在example/src/app.js中引入组件即可。

```javascript
import React from 'react'
import { render } from 'react-dom'
import Component from 'your-component-name';
import 'your-component-name/lib/main.min.css';

const App = () => <Component/>
render(<App />, document.getElementById('root'))
```

## 发布流程

1. npm帐号申请（已有npm帐号忽略）

   如果当前使用的npm源地址不是官方源地址（比如淘宝镜像）需要先切换回官方地址

   ```shell
   npm config set registry http://registry.npmjs.org
   ```

   然后执行

   ```shell
   npm adduser
   ```

   按提示信息输入自己的用户名、密码及邮箱后，如果命令行输出`Logged in as <user> on https://registry.npmjs.org/`，则说明账号注册并登陆成功。npm 会把登陆信息记录并暂存在 `/Users/<user>/.npmrc` 配置文件中，新申请的帐号在发包时需要进行邮箱验证。

2. 填写package.json里面的重要信息

   ```json
   {
     "name": "hc-button",        // 包名
     "version": "1.0.1",         // 版本号
     "description": "A react button component of Haici Technology",      //包描述
     "main": "lib/index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "set NODE_ENV=production && webpack --config ./config/webpack.prod.config.js",
       "publish": "npm run build && npm publish --access=public",
       "start": "webpack-dev-server --config ./config/webpack.dev.config.js"
     },
     "author": "CHEN Yue",     //包作者
     "license": "ISC",
     "browserslist": [
       "defaults"
     ],
     "keywords": [        // 关键字（用于在npm上搜索包）
       "react",
       "component",
       "button",
       "Haici Technology"
     ],
     "devDependencies": {
       "@babel/cli": "^7.10.1",
       "@babel/core": "^7.10.2",
       "@babel/plugin-proposal-class-properties": "^7.10.1",
       "@babel/plugin-proposal-decorators": "^7.10.1",
       "@babel/plugin-transform-modules-commonjs": "^7.10.1",
       "@babel/plugin-transform-runtime": "^7.10.1",
       "@babel/preset-env": "^7.10.2",
       "@babel/preset-react": "^7.10.1",
       "@types/classnames": "^2.2.10",
       "@types/node-sass": "^4.11.1",
       "@types/react": "^16.9.36",
       "@types/react-dom": "^16.9.8",
       "autoprefixer": "^9.8.0",
       "awesome-typescript-loader": "^5.2.1",
       "babel-loader": "^8.1.0",
       "babel-polyfill": "^6.26.0",
       "classnames": "^2.2.6",
       "css-loader": "^3.5.3",
       "file-loader": "^6.0.0",
       "html-loader": "^1.1.0",
       "less": "^3.11.3",
       "less-loader": "^6.1.0",
       "mini-css-extract-plugin": "^0.9.0",
       "node-sass": "^4.14.1",
       "postcss-cssnext": "^3.1.0",
       "postcss-loader": "^3.0.0",
       "react": "^16.13.1",
       "react-dom": "^16.13.1",
       "sass-loader": "^8.0.2",
       "style-loader": "^1.2.1",
       "typescript": "^3.9.5",
       "webpack": "^4.43.0",
       "webpack-cli": "^3.3.11",
       "webpack-dev-server": "^3.11.0",
       "webpack-merge": "^4.2.2"
     },
     "dependencies": {
       "prop-types": "^15.7.2"
     }
   }
   ```

3. 执行发布命令

   ```
   npm run pub
   // 等于执行 npm run build + npm publish
   ```

   发布成功之后登录npm可以在自己的package选项卡内看到已经发布的包 <https://www.npmjs.com/>


## 使用方法

```shell
npm install <your component name>
```

```javascript
import Component from 'your-component-name';
import 'your-component-name/lib/main.min.css';
```

## 代码规范

1. 用eslint 规则参照：[eslint-airbnb](https://github.com/airbnb/javascript)
2. 其他内部规范：[JS代码风格及通用规范](http://192.168.11.166/pages/viewpage.action?pageId=13534304)

---
_Source: https://npm.io/package/hc-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._