## plop 模板工具
概述
plop 模板生成cli
安裝
// 全局安裝
npm i -g plop
// 本地安裝
npm i --save-dev plop
配置文件
// 更目錄創(chuàng)建文件 plopfile.js plop將已該文件作為執(zhí)行入口
// 導(dǎo)出執(zhí)行函數(shù)
module.exports = function(plop){
plop.getGenerator("模板名稱", {
description: "操作描述",
prompts: [], // 交互提示
actions: [] // 執(zhí)行操作
})
}
基礎(chǔ)使用
- 注冊(cè)
// plopfile.js
module.exports = function(plop){
plop.getGenerator("vue基礎(chǔ)模板", {
description: '創(chuàng)建vue文件',
prompts: [
{
type: 'input', // 交互類型
name: 'name', // 參數(shù)名稱
message:'請(qǐng)輸入文件名稱' // 交互提示
},
{
type: 'input',
name: 'path',
message: '請(qǐng)輸入文件創(chuàng)建目錄'
}
],
actions: [
{
type: 'add', // 動(dòng)作類型
path: '{{ path }}/{{ name }}.vue', // '{{ }}' 雙大括號(hào)內(nèi)設(shè)置動(dòng)態(tài)參數(shù)
templateFile: 'plop-templates/views/vue.hbs' // 模板文件地址， 使用hbs文件
}
]
})
}
// plop-templates/views/vue.hbs
<template>
<div class='cmp-{{ name }}' >
</div>
</template>
<script>
export default {
name: '{{ name }}'
}
</script>
<style>
</style>
-
執(zhí)行命令
plop ... 請(qǐng)輸入文件名稱 tmp 請(qǐng)輸入文件名稱 template/cmp -
執(zhí)行結(jié)果
// root/template/cmp/tmp.vue <template> <div class='cmp-tmp' > </div> </template> <script> export default { name: 'tmp' } </script> <style> </style>
plop 命令參數(shù)
// 執(zhí)行指定配置
plop 配置名稱
// 執(zhí)行指定配置并設(shè)置參數(shù)
plop 配置名稱 輸入?yún)?shù)
// 執(zhí)行 plopfile 文件
--plopfile 文件路徑
// 設(shè)置工作路徑
--cwd
// 幫助
-h, --help
// 全局初始化
-i, --init
// 顯示版本
-v, --version
generator 生成器 API
生成器， 用來生成執(zhí)行文件模板或向文件中加入模板信息
- description 描述生成器行為
- prompts 提示配置 詳情
- type 交互類型
inputnumbercheckbox... - name 參數(shù)使用存儲(chǔ)的屬性名
- message 提示信息
- default 參數(shù)默認(rèn)值
- ....
- type 交互類型
- actions 執(zhí)行配置 詳情
- type 預(yù)設(shè)類型
addmodifyaddManyetc - force
- data 返回給模板的數(shù)據(jù)
- abortOnFail 當(dāng)有action 執(zhí)行失敗時(shí)， 是否終止其他 action
- type 預(yù)設(shè)類型
默認(rèn) action API
-
addA 創(chuàng)建文件
path 文件生成目錄
-
template 模板字符串, 使用字符串模板生成文件內(nèi)容
{ template: '<h1>{{ title }} <h1>' }
templateFile 模板文件地址, 使用模板文件生成文件
skipIfExists 如果文件已存在，將跳過
force
data 模板參數(shù)
abortOnFail 當(dāng)有action 執(zhí)行失敗時(shí)纹因， 是否終止其他 action
-
addMany 創(chuàng)建多個(gè)文件
destination
-
base 替換的基礎(chǔ)目錄
{ destination：'target', base: 'root/sub', templateFiles: 'root/sub/*.hbs' } // 生成的文件目錄： target/file.hbs
-
templateFiles 模板文件匹配規(guī)則 參考
{ templateFiles: 'plop-templates/view/*.hbs' } globOptions 更改匹配方式
stripExtensions
verbose 是否打印所有文件目錄
skipIfExists
force
data
abortOnFail
-
modify 修改
- path
- pattern 替換規(guī)則 正則
- template
- templateFile
- data
- abortOnFail
-
append 添加
- path
- pattern 插入規(guī)則 正則
- unique
- separator
- template
- templateFile
- data
- abortOnFail
模塊分組
我們可將多個(gè) 配置分配到多個(gè)文件中單獨(dú)管理
// module/view/prompt.js 頁面模板
const conf = {
description: "view template",
prompts: [
{
type: 'input',
name: 'name',
message: 'file name',
}
],
actions: data => {
const name = '{{name}}'
return [
{
type: 'add',
path: `template/${name}.vue`,
templateFile: 'plop-templates/view/index.hbs',
}
]
}
}
module.exports = function (plop){
plop.setGenerator('view', conf)
}
// module/components/prompt.js 組件模板
const conf = {
description: "cmp template",
prompts: [
{
type: 'input',
name: 'name',
message: 'file name',
}
],
actions: data => {
const name = '{{name}}'
return [
{
type: 'add',
path: `template/${name}.vue`,
templateFile: 'plop-templates/cmp/index.hbs',
}
]
}
}
module.exports = function (plop){
plop.setGenerator('view', conf)
}
// root/plopfile.js
const viewCallback = require('./plop-templates/view/prompt')
const cmpCallback = require('./plop-templates/cmp/prompt')
module.exports = function(plop){
cmpCallback(plop)
viewCallback(plop)
}
其他
- Handlebars 模板語法
- glob glob 介紹
