利用hygen模板生成器编写react组件的套路（有手就行？）

  在我们平常写代码的时候，如果找到一种技术的编写套路，就会使许多很绕的脑力工作变成一些复制粘贴的简单体力工作，但这种复制粘贴的工作不但浪费我们的编码时间，在有些时候还会因为一些名字的错误让出现一些奇怪的bug。
  所以今天，我来分享一下我在编写react UI 组件时摸出的编写套路，当然呢，这个套路是基于hygen模板生成器的，有了这个套路，组件编写效率刷刷提升，是真的“有手就行”。

一、安装并初始化hygen

1. 安装

$ npm i -g hygen

2. 初始化

$ hygen init self

此时我们会在项目根目录下看到一个名为 _templates 的文件夹，这里就是放置我们要生成的模板的文件夹。
我们这次试用hygen的目的是为了方便react组件的编写，所以，我们就可以创建一个组件模板 component

3. 创建component模板

$ hygen generator new component

我们再看看文件目录，就会发现出现了component的文件夹

image.png

二、编写模板文件

新建index.js文件模板

1. 编写模板描述信息

删除 /_templates/component/new 文件夹下的默认文件，并在这个目录下创建一个 index.ejs.t文件，里面先写上一下代码

---
to: src/components/<%= name %>/index.js
---

解释一下，这里的三行代码是该模板的描述信息，to是规定吧模板的生成文件放在那里，<% name %>表示name可以为文件内部的变量，相当于为了给将来生成的各个组件直接建好对应名称的文件夹。

2. 定义模板代码

在这里请大家注意文件中的 name属性都是带着 <% %> 的。

//引入各种依赖文件
import React from 'react'
import PropTypes from 'prop-types'
import Styled<%= name %> from './style'

//主组件代码
function <%= name %>({
    children, ...rest
}) {
    return (
        <Styled<%= name %> {...rest}>
            {children}
        </Styled<%= name %>>
    )
}

//类型检查代码
<%= name %>.propTypes = {
    children: PropTypes.any
}

//抛出主组件
export default <%= name %>;

新建style.js文件模板

1. 在同目录下创建style.ejs.t文件并编写模板信息

在/_templates/component/new 文件夹里创建一个 style.ejs.t文件，并编码：

---
to: src/components/<%= name %>/style.js
---

import styled from 'styled-components';

const Styled<%= name %> = styled.div``;

export default Styled<%= name %>;

三、应用

  上面我们已经完成了component模板的编写，现在让我们创建一个icon组件来试试吧。

使用命令创建一个Icon组件

在文件根目录下使用命令行输入：

$ hygen component new Icon

回到/src/components目录下，我们就能刚刚生成的Icon组件（包含 index.js 和 style.js 两个文件）了，省去了我们很大一部分复制粘贴的过程，十分的方便。