【文末送書(shū)】告別復(fù)制粘貼-動(dòng)態(tài)模板生成小技巧
本文首發(fā)于政采云前端團(tuán)隊(duì)博客：告別復(fù)制粘貼：動(dòng)態(tài)模板生成小技巧
https://www.zoo.team/article/dynamic-template-generation
前言
在日常開(kāi)發(fā)中，我們需要不停的新建頁(yè)面和組件。以 Vue 項(xiàng)目為例，我們?cè)谛陆ㄒ粋€(gè)頁(yè)面的時(shí)候，需要經(jīng)歷一遍又一遍重復(fù)的過(guò)程：
1、先新建一個(gè)文件夾
2、然后新建一個(gè) .vue 文件，寫(xiě)上 、",
???"
???""
??],
??"description":?"vue-template"
?}
}
效果展示如下：
基于 plop 自定義基礎(chǔ)的文件模板
plop的介紹可以看 plop官網(wǎng)：https://plopjs.com/documentation/)，plop 功能主要是基于 inquirer (https://github.com/SBoudrias/Inquirer.js/) 和 handlebars (https://github.com/handlebars-lang/handlebars.js) 。
簡(jiǎn)單的說(shuō)，plop 這個(gè)輕量的腳手架就是通過(guò)提前配置好要生成的頁(yè)面模板，并且在命令行中接受指定的參數(shù)，從而生成我們需要的模板。
在項(xiàng)目中安裝 plop
npm install --save-dev plop
項(xiàng)目根目錄下新建 plopfile.js
module.exports?=?function(plop){
??plop.setGenerator('test',{?//?這里的?test?是一個(gè)自己設(shè)定的名字，在執(zhí)行命令行的時(shí)候會(huì)用到
??????description:?'generate?a?test',?//?這里是對(duì)這個(gè)plop的功能描述
??????prompts:?[
????????{
??????????type:?'input',?//?問(wèn)題的類型
??????????name:?'name',?//?問(wèn)題對(duì)應(yīng)得到答案的變量名，可以在actions中使用該變量
??????????message:?'view?name?please',?//?在命令行中的問(wèn)題
??????????default:?'test'?//?問(wèn)題的默認(rèn)答案
????????}
??????],
??????actions:?data?=>?{
??????????const?name?=?'{{name}}';
??????????const?actions?=?[
??????????{
??????????????type:?'add',?//?操作類型，這里是添加文件
??????????????path:?`src/views/${name}/index.vue`,?//?模板生成的路徑
??????????????templateFile:?'plop-templates/view/index.hbs',?//?模板的路徑
??????????????data:?{
????????????????name:?name
??????????????}
??????????}
????????];
????????return?actions;
??????}
????});
}
在根目錄下創(chuàng)建 plop-templates 文件夾，并在 plop-templates/view 里新建一個(gè)index.hbs
??<div?/>
</template>
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>