hc-button

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/

项目结构

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

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

发布流程

1. 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 配置文件中，新申请的帐号在发包时需要进行邮箱验证。

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

3. 执行发布命令

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

代码规范

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