什么是Plop

plop是一個小型的腳手架基协，可以通過命令行去生成、處理文件模板代碼等.

不過plop不會獨立使用恩沛，一般都會把plop集成到項目中用來創(chuàng)建同類型的項目文件.

如果項目的很多模塊的結構骨架都非常相似十拣，引入模版內容相同就可以使用Plop來實現(xiàn)自動化了，Plop旨在根據模板文件自動化創(chuàng)建組件.

plop的基本使用

npm install plop

如果沒有全局安裝渔扎，要在package.json中的script中增加腳本命令：
"scripts": { "plop": "plop" },

創(chuàng)建路由Generator

在根目錄創(chuàng)建plop-templates用于存放各種模板

創(chuàng)建一個router目錄作為路由的generator,并創(chuàng)建generator的js文件和hbs模板

image.png

prompt.js文件來定義腳手架任務

// Plop 入口文件硫狞，需要導出一個函數
// 此函數接收一個plop對象，用于創(chuàng)建生成器函數

module.exports = {
  description: 'table-temp', //描述這個generate的作用
  prompts: [
    {
      type: 'input', // 問題的類型
      name: 'pathName', // 問題對應得到答案的變量名晃痴，可以在acitons中使用該變量
      message: '文件名稱', // 在命令行中的問題
    },
  ],
  actions: (data) => {
    // 這里可以通過data獲取輸入的pathname
    let name = data.pathName.split('/');
    name = name[name.length - 1];
    name[0] = name[0].toLocaleUpperCase();
    const actions = [
      {
        type: 'add', // 操作類型 添加文件
        path: `src/views/temp/${data.pathName}.vue`, //添加的文件的路徑
        templateFile: 'src/views/dashboard/analysis/index.vue', //模版文件的路徑
        data: {
          name,
        },
      },
      {
        type: 'add', // 添加多個
        path: `src/views/temp/${data.pathName}.tsx`,
        templateFile: 'src/views/dashboard/analysis/tableData.tsx',
        data: {
          name,
        },
      },
    ];

    return actions;
  },
};

index.hbs編寫生成文件的模版內容癣猾，可自己根據項目需求進行定義

require('module-alias/register');
import BaseController from '@base/baseController';
import { AController } from '@lib/aRouter';

export default class {{ name }}Controller extends BaseController {
}

項目的根目錄下創(chuàng)建plopfile.js文件

plopfile從低級節(jié)點模塊開始，它導出一個函數余爆，該函數接受plop對象作為它的第一個參數纷宇。

plop對象公開包含setGenerator(name, config)函數的plop api對象。這是用來為這個plopfile創(chuàng)建生成器的函數蛾方。當plop從目錄中的終端運行時像捶，將顯示這些生成器的列表上陕。

image.png

const routerGenerator = require('./plop-templates/router/prompt');

module.exports = function (plop) {
  plop.setGenerator('table-temps', routerGenerator);
  plop.setGenerator('info-temps', routerGenerator);

  plop.setHelper('upperCase', function (text) {
    return text.toUpperCase();
  });
  plop.setPartial('myTitlePartial', '<h1>{{titleCase name}}</h1>');
};

如果要用module.exports = function (plop)方式，需要安裝CommonJS

運行plop

npm run plop

image.png

根據提示輸入文件名即可

繞開提示器

一旦你已經熟悉了項目以及其中的生成器作岖，你可能希望在運行生成器時就為它提供答案唆垃，而不是等它提出問題后才給出答案五芝。比如痘儡，我有一個名為component的生成器，它會向我提一個問題要求我輸入一個名字枢步，我就可以使用下面這樣的命令：$ plop componnet "componentname" ,它就會立即執(zhí)行就像我在提示器中輸入答案一樣沉删。如果這個生成器還有第二個問題，那用戶在上面命令中可以輸入第二個值作為第二個問題的答案醉途。

像confirm和list這樣的提示確保你的輸入時有含義的矾瑰。比如輸入y/yes/t/true中的一個作為一個需要一個布爾值的確認性提問的答案。你可以從一個列表來選擇使用他們的值隘擎、索引殴穴、鍵或者名稱。Checkbox類型的提示器可以接受一個用逗號分割開的值列表來實現(xiàn)多選货葬。

ps: 如果你想為第二個提問（而非第一個問題）提供答案采幌，你可以使用下劃線來跳過。

Plofile API

TypeScript 聲明

plop捆綁了TypeScript聲明震桶。無論用不用ts聲明休傍，編輯器都會通過這些聲明提供代碼幫助 。

常用方法

setHelper

setHelper直接對應于handlebars方法registerHelper磨取。

`
plop.setHelper('upperCase', function (text) {
return text.toUpperCase();
});

// or in es6/es2015
plop.setHelper('upperCase', (txt) => txt.toUpperCase());
`

setPartial

setPartial直接對應于handlebars的方法方法registerPartial。

module.exports = function (plop) { plop.setPartial('myTitlePartial', '<h1>{{titleCase name}}</h1>'); // used in template as {{> myTitlePartial }} };

setActionType

setActionType允許您創(chuàng)建可以在plopfile中使用的自己的操作(類似于添加或修改)柴墩。這些基本上是高度可重用的自定義操作函數忙厌。

`
module.exports = function (plop) {

plop.setActionType('doTheThing', function (answers, config, plop) {
    // do something
    doSomething(config.configProp);
    // if something went wrong
    throw 'error message';
    // otherwise
    return 'success status message';
});

// or do async things inside of an action
plop.setActionType('doTheAsyncThing', function (answers, config, plop) {
    // do something
    return new Promise((resolve, reject) => {
        if (success) {
            resolve('success status message');
        } else {
            reject('error message');
        }
    });
});

// use the custom action
plop.setGenerator('test', {
    prompts: [],
    actions: [{
        type: 'doTheThing',
        configProp: 'available from the config param'
    }, {
        type: 'doTheAsyncThing',
        speed: 'slow'
    }]
});

}
`

setGenerator

配置對象應該包含prompts與actions 屬性（description屬性是可選的）。prompts數組是在終端中的提示問題江咳。而 actions 數組是要執(zhí)行的操作的列表慰毅。

GeneratorConfig 接口

ActionConfig 接口

其他方法

內置action的一些動作

add

add 動作被用來向你的項目中新增一個文件呵哨，path 屬性指定生成文件的路徑，它本身是一個handlebars模板轨奄，用戶輸入的文件名稱將作為變量嵌入其中孟害。文件內容將由template或templateFile決定。

AddMany

addMany 動作可以一步創(chuàng)建多個文件。destination屬性是用來指定生成文件所在目錄的玉组，它是一個handlebars模板谎柄，意味著該屬性中定義的目錄路徑可以是動態(tài)的。base屬性可以用于更改在創(chuàng)建文件時應該忽略模板路徑的哪些部分惯雳。 如果您希望添加的文件名是唯一的朝巫，則templateFiles glob位于的路徑可以在它們的文件/文件夾名稱中使用handlebars語法

|屬性 |類型 默認值| 說明|
| -------- | -------- | -------- | -------- |
|destination| String | |規(guī)定新文件要創(chuàng)建到的目錄（是一個handlebars模板）|
|base |String | |當文件要被創(chuàng)建到目錄中時需要忽略的路徑部分|
|templateFiles |Glob | |匹配要添加的多個模板文件的glob模式|
|stripExtensions| [String]| [‘hbs’] |文件擴展名，在將其添加到目標文件時石景，應該從模板文件名稱中刪除這些擴展名|
|globOptions |Object | |更改如何與要添加的模板文件匹配的glob選項|
|verbose |Boolean| true |打印每個成功添加的文件路徑|
|skipIfExisits |Boolean| false |繼承自Add接口|
|force |Boolean| false |繼承自 ActionConfig 對象|
|data| Object| {} |繼承自 ActionConfig 對象|
|abortOnFail |Boolean |true |繼承自 ActionConfig 對象|

Modify

modify 修改動作將使用pattern屬性在指定路徑(path)下的文件中查找/替換文本劈猿。

屬性	類型	默認值	說明
path	String		要修改的文件的路徑（是一個handlebars模板）
pattern	RegExp	end-of-file	一個正則表達式，用來匹配需要被替換的文本
template	String		一個handlebars模板潮孽，用它取代所匹配的模式揪荣。捕獲組的值有2等
templateFile	String		是一個包含模板的路徑
data	Object	{}	繼承自ActionConfig
abortOnFail	Boolean	true	繼承自ActionConfig

Append

append 追加操作是一個常用功能恩商，它是modify接口的子集变逃。它用于將數據附加到文件中的特定位置。

Custom（動作函數）

add和modify操作將處理plop要處理的幾乎所有情況 .但是，plop 提供一些自定義動作的函數粟矿。

• 自定義動作函數將被plop執(zhí)行凰棉，這時會使用相同的 CustomAction 動作簽名；
• 在執(zhí)行下一個動作前陌粹，plop 將會等待自定義動作執(zhí)行完撒犀。
• 這個函數必須通過返回值來告訴plop，發(fā)生了什么掏秩。如果您返回的是一個 Promise對象或舞，那plop 不會開始其它動作梁剔，直到Promise 達到解決狀態(tài)诗芜。如果您返回一條消息（字符串）,plop 將知道動作已經完成系瓢，它將在動作的狀態(tài)中報告消息仰挣。
• 當Promise變?yōu)榫芙^態(tài)或者函數拋出一個異常，自定義動作將失敗低零。