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

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

Package detail

hc-button

readme