title: Hygen
date: 2022-08-31 22:19:22
tags: 
- Hygen
- 模板
- 工具
categories: 
- 前端

Hygen模板生成器

安装

安装：npm i -g hygen

初始化hygen：hygen init self

生成

生成模板：hygen generator new component

配置

这里面的.ejs.t后缀文件就是一个个模板

• ---分割部分标识模板生成路径
• <%= name %>表示组件名字，也对应了下文指令

---
to: src/components/<%= name %>/index.js
---
​
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 %>
​

• 对于需要大写的模板可以使用内置的方法

  • h.changeCase.lcFirst(name)

---
to: src/components/<%= name %>/<%= h.changeCase.lcFirst(name) %>.stories.js
---

import React from 'react';
import <%= name %> from '.';

export default{
    title:"<%= name %>",
    component:<%= name %>
};

export const Default = ()=> <<%= name %>>默认<<%= name %>>;

使用对应模板生成内容：

hygen component new Icon 这个Icon是自定义名字

备注

这个component叫做生成器，而new叫做action

一个hygen可以有多个生成器，一个生成器可以有多个action

有趣的是上文中的hygen generator new component叫做生成器的生成器。

这个Icon对应上文中的<%= name %>

\