轻松开发React组件和造轮子指北

前言

本文将给大家分享以下内容：

轻松开发一个react组件
手写一个组件模板template并借助yeoman开发脚手架

后续将用到的源码地址粘贴如下：

组件模板源码地址：react-component-template

yoeman脚手架源码地址：generator-react-component-magic

轻松开发一个react组件

很多前端开发者在开发react组件的时候往往不知从何下手，如果你也有此困惑，那么读完本文肯定让你拨云见日立即手撸一个组件出来，这里将使用Damujiangr开发的yeoman脚手架轻松搭建一个react组件开发工程

建议在github或gitlab上创建工程，然后clone到本地，再执行以下操作，这样可以保证在生成package.json时自动填充repository、bugs、homepage等git仓库信息字段

首先是工具安装

[sudo] npm install -g yo                                 # yo工具安装
[sudo] npm install -g generator-react-component-magic    # template安装

yo react-component-magic                                 # 工程初始化

node.js版本建议选择8.x，windows系统可能有webpack plugin的兼容问题

├── doc                     // 使用文档
├── examples                // 示例代码
├── package.json
├── rollup.config.js
├── src                     // 源代码
├── style                   // 源代码样式
└── webpack.config.js

src目录结构

├── __tests__			// 测试目录
├── components			// 组件目录
│   ├── Block.js		// 单一组件
│   └── __tests__		// 测试目录
└── index.js			// 主入口

此结构支持单一组件的开发和导出，如图例中的Block.js，也支持多个组件同时开发和导出，在component下创建文件夹或者新的文件即可，只要在index.js中组织export的方式即可

单一文件导出示例

import Block from './components/Block';

export default Block;

多个组件导出示例

export { default as Block } from './components/Block';
export { default as Other } from './components/Other';
export { default as More } from './components/More';

代码规范约束使用的eslint，遵循airbnb代码规范

rollup.config.js说明

作用是导出组件的外链版本，供在HTML中通过srcipt:src方式引入

在配置中可以通过修改output.name指定组件对外暴露的变量名
webpack.config.js

作用是通过npm start运行本地开发时的一些配置

在配置中可以通过resolve.alias指定npm包名

执行npm run build会构建出组件代码，用于上传NPM，目录如下，其他style源代码也是生产代码

├── dist                    // 产物外链版本
├── esm                     // 产物ES6版本
├── lib                     // 产物ES5版本
└── style                   // 源代码样式

在package.json中已经配置好入口：

"main": "lib/index.js",		// 一般情况下的主入口
"module": "esm/index.js"	// 提案，用于引入ES Module的入口

本地开发测试和测试脚本测试对组件开发来说是非常必要的，本例中可以在example中可以直接通过import方式引入正在开发的组件，进行本地测试在example/app.js引入组件
```
import 'react-component-template/style/component.css';// eslint-disable-line
import Block from 'react-component-template/src'; // eslint-disable-line
```
通过npm start命令自动打开浏览器并打开热更新功能，可以方便的进行本地开发测试

测试框架使用的是Jest,可以在每级目录的__test__目录下编写对接的测试文件，执行npm run test命令即可得到测试结果，代码覆盖率报告使用的codecov, 如果你的工程上传到github，并配置好travis CI，可以通过codecov上传测试报告
上传NPM

首先要有一个npm账号
```
npm version patch[|minor|major]		# 控制版本号
npm publish				# 发布
```
到此为止，你就可以愉快地开发属于你自己的react组件了，并且可以发布到NPM上分享给其他人

手写一个组件模板template并借助yeoman开发脚手架

手写一个组件需要注意的几点：

最终产出代码，最好包含lib[babel编译后代码]、esm[es module格式代码]、dist[外链版本]三种格式，以提供多种方式供使用者引用，当然esm和dist并不是必须的
- 值得注意的是，千万不要将依赖的react库打包进来
example要有，既能帮助自己测试，也可以让其他人参考更快地进行使用
组件测试用例，推荐使用Jest，代码覆盖率推荐使用codecov，如果你的代码放在Github上，最好接入Travis CI
发布NPM包时可以在package.json中指定files字段，其中包含的文件夹和文件将会被发布到NPM上

yeoman脚手架

React官方脚手架是Create React App，在开发React项目的时候还是非常推荐的，对于开发react组件，就会显的大材小用过于复杂，而且修改webpack配置是每一个FE头痛的事情，所以我基于Yeoman手写了一个脚手架，入门非常简单快捷，主要编写过程如下：

使用yeoman官方推荐的generator初始化工程目录
```
[sudo] npm install -g generator-generator
yo generator
```
使用async/await结合Promise控制流程
1. 从github上下载模板react-component-template到本地的暂存目录，借助了download-git-repo
2. 复制需要的模板文件到工作目录下，删除暂存目录
3. 结合init-package-json, 根据问答的结果merge了package.json的字段信息
4. 替换模板中特定的占位符一个定制的完整的react组件开发工程初始化完毕
源代码可以参考文首提到的链接，欢迎Star、PR

react-component-template、generator-react-component-magic

到此为止，相信你已经可以开发自己的react组件了，也掌握了开发组件模板的基本概念，脚手架可以基于yeoman，也可以自己编写一个，一切以提升工程化程度，减少重复劳动为目的

最后环节，给团队打个广告，团队规模20+，主要负责58招聘生态的前端开发工作，各种流行技术栈等你来挑战React、Vue、Node.js......简历请砸过来-->yanlongbo@58.com

斧凿开天地绳墨定心猿我是前端匠人Damujiangr