Package Exports

hc-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hc-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React组件模板使用说明

项目介绍

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

技术栈

react@16 + webpack@4

快速开始

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

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

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

项目结构

|--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配置文件

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

本地运行

npm run start

编译打包

npm run build

功能验证

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

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

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'))

发布流程

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

如果当前使用的npm源地址不是官方源地址（比如淘宝镜像）需要先切换回官方地址
```
npm config set registry http://registry.npmjs.org
```
然后执行
```
npm adduser
```
按提示信息输入自己的用户名、密码及邮箱后，如果命令行输出Logged in as <user> on https://registry.npmjs.org/，则说明账号注册并登陆成功。npm 会把登陆信息记录并暂存在 /Users/<user>/.npmrc 配置文件中，新申请的帐号在发包时需要进行邮箱验证。

填写package.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"
  }
}

执行发布命令
```
npm run pub
// 等于执行 npm run build + npm publish
```
发布成功之后登录npm可以在自己的package选项卡内看到已经发布的包 https://www.npmjs.com/

使用方法

npm install <your component name>

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

代码规范

用eslint 规则参照：eslint-airbnb
其他内部规范：JS代码风格及通用规范