??在我們平常寫(xiě)代碼的時(shí)候，如果找到一種技術(shù)的編寫(xiě)套路邻薯，就會(huì)使許多很繞的腦力工作變成一些復(fù)制粘貼的簡(jiǎn)單體力工作裙戏，但這種復(fù)制粘貼的工作不但浪費(fèi)我們的編碼時(shí)間，在有些時(shí)候還會(huì)因?yàn)橐恍┟值腻e(cuò)誤讓出現(xiàn)一些奇怪的bug厕诡。
??所以今天累榜，我來(lái)分享一下我在編寫(xiě)react UI 組件時(shí)摸出的編寫(xiě)套路，當(dāng)然呢，這個(gè)套路是基于hygen模板生成器的壹罚，有了這個(gè)套路葛作，組件編寫(xiě)效率刷刷提升，是真的“有手就行”猖凛。
一赂蠢、安裝并初始化hygen
1. 安裝
$ npm i -g hygen
2. 初始化
$ hygen init self
此時(shí)我們會(huì)在項(xiàng)目根目錄下看到一個(gè)名為 _templates 的文件夾，這里就是放置我們要生成的模板的文件夾辨泳。
我們這次試用hygen的目的是為了方便react組件的編寫(xiě)虱岂，所以，我們就可以創(chuàng)建一個(gè)組件模板 component
3. 創(chuàng)建component模板
$ hygen generator new component
我們?cè)倏纯次募夸洸ず欤蜁?huì)發(fā)現(xiàn)出現(xiàn)了component的文件夾
二第岖、編寫(xiě)模板文件
新建index.js文件模板
1. 編寫(xiě)模板描述信息
刪除 /_templates/component/new 文件夾下的默認(rèn)文件，并在這個(gè)目錄下創(chuàng)建一個(gè) index.ejs.t文件试溯，里面先寫(xiě)上一下代碼
---
to: src/components/<%= name %>/index.js
---
解釋一下蔑滓，這里的三行代碼是該模板的描述信息，to是規(guī)定吧模板的生成文件放在那里遇绞，<% name %>表示name可以為文件內(nèi)部的變量键袱，相當(dāng)于為了給將來(lái)生成的各個(gè)組件直接建好對(duì)應(yīng)名稱的文件夾。
2. 定義模板代碼
在這里請(qǐng)大家注意文件中的 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. 在同目錄下創(chuàng)建style.ejs.t文件并編寫(xiě)模板信息
在/_templates/component/new 文件夾里創(chuàng)建一個(gè) style.ejs.t文件蹄咖，并編碼：
---
to: src/components/<%= name %>/style.js
---
import styled from 'styled-components';
const Styled<%= name %> = styled.div``;
export default Styled<%= name %>;
三、應(yīng)用
??上面我們已經(jīng)完成了component模板的編寫(xiě)钩骇，現(xiàn)在讓我們創(chuàng)建一個(gè)icon組件來(lái)試試吧比藻。
使用命令創(chuàng)建一個(gè)Icon組件
在文件根目錄下使用命令行輸入：
$ hygen component new Icon
回到/src/components目錄下铝量，我們就能剛剛生成的Icon組件（包含 index.js 和 style.js 兩個(gè)文件）了倘屹，省去了我們很大一部分復(fù)制粘貼的過(guò)程，十分的方便慢叨。
