## 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

生成器， 用來(lái)生成執(zhí)行文件模板或向文件中加入模板信息

• description 描述生成器行為
• prompts 提示配置 詳情
  • type 交互類型 input number checkbox ...
  • name 參數(shù)使用存儲(chǔ)的屬性名
  • message 提示信息
  • default 參數(shù)默認(rèn)值
  • ....
• actions 執(zhí)行配置 詳情
  • type 預(yù)設(shè)類型 add modify addMany etc
  • force
  • data 返回給模板的數(shù)據(jù)
  • abortOnFail 當(dāng)有action 執(zhí)行失敗時(shí)， 是否終止其他 action

默認(rèn) action API

• addA 創(chuàng)建文件

  • path 文件生成目錄

  • template 模板字符串, 使用字符串模板生成文件內(nèi)容

    {
        template: '<h1>{{ title }} <h1>'
    }
    
    

• templateFile 模板文件地址, 使用模板文件生成文件

• skipIfExists 如果文件已存在，將跳過(guò)

• 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 頁(yè)面模板
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 模板語(yǔ)法
• glob glob 介紹