Hygen模板生成器
安装
安装：npm i -g hygen
初始化hygen：hygen init self
生成
生成模板：hygen generator new component
配置
这里面的.ejs.t后缀文件就是一个个模板
---分割部分标识模板生成路径<%= name %>表示组件名字，也对应了下文指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| ---
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
| ---
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 %>