plopjs是一個基于node js所開發的小工具，主要作用是根據模板代碼生成目標代碼。

plop對于模板代碼的處理選擇了 handlebars 作為模板

目的

通過自動化工具減少開發中重復代碼的書寫

使用舉例

新建一容器組件用于展示消息列表，組件名為message

使用plop前

在項目的適當目錄下新建message/index.js文件，message/index.less文件。
在message/index.js文件內寫出react組件的基礎代碼，并在message/index.less內書寫默認樣式

使用plop之后（需要提前進行相關的配置）

項目根目錄，終端運行plop，根據提示輸入組件名message
添加路由配置文件（這步驟應該也可以由plop完成）

對比

手動操作：通常我的做法是復制現有的組件，然后重命名，不過有時候涉及到的文件可能更多，比如redux的action與reducer文件。由于是手動操作，有時候也可能忘記了對于某個地方的修改。
使用plop：終端操作只需要在命令行進行適當的交互就可以，自動生成對應文件，不會出錯并且快速。

應用場景

【前端】vue/react框架新建新的頁面
【前端】根據接口文檔，自動生成有關的代碼（比如發送請求的函數）？
【前端】redux有關代碼的自動生成？
對于某些不方便抽象的重復代碼。比如前端某些類似的表格、表單、頁面布局、類似的controller等，可以抽象為模板的代碼
【小程序】在使用非官方開發工具時，通過腳本來創建組件/頁面，從而實現類似于微信開發者工具，一次性創建出wxml，wxss，js，json文件。并且可以自定義這些模板。
其他與模板有關的功能。

注：plop.js的終端交互使用了Inquirer.js，所以也可以使用inquirer的插件對其功能進行擴展（比如選擇文件夾）

開始

安裝npm包

npm i plop -g
npm i plop -D

在項目的根目錄創建配置文件plopfile.js

// 配置文件主要是exports了一個函數
module.exports = function (plop) {
    // controller generator
    plop.setGenerator('controller', {
        description: 'application controller logic',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'controller name please'
        }],
        actions: [{
            type: 'add',
            path: 'src/{{name}}.js',
            templateFile: 'plop-templates/controller.hbs'
        }]
    });
};

創建 plop-templates/controller.hbs文件。并寫一些內容。
在項目根目錄下，執行 plop，然后根據終端命令提示進行操作即可，最終會發現自動生成了 src/{{name}}.js 文件，文件的內容就是模板的內容。

Plopfile Api

配置文件是支持ts的，具體的使用方法請參考官網

setGenerator

此函數接受兩個參數，第一個參數是設置的Generator的名字，第二個config對象需要包括提示和操作（description是可選的）。prompts數組被傳遞給inquirer。actions數組是要執行的操作的列表。

典型的配置如下：

// 示例
module.exports = function (plop) {
  plop.setGenerator('fc_page', {
    description: 'application fc_page logic', // 可選字段，會顯示在控制臺
    prompts: [{
      type: 'input', // 用來在終端輸入文本
      name: 'name', // 在 actios 內 可以通過{{name}} 取到這里輸入的值，在模板內也可以通過{{name}}取到這個值
      message: '請輸入函數組件的名字（必填）', // 會顯示在控制臺
      validate(val) {
        // 如果驗證不通過，需要返回字符串，字符串將會被展示在控制臺
        // 驗證通過，則返回true
        return true;
      },
      default: "default",   // 默認值
    }],
    actions:[{
            // 添加文件 src/components/{{name}}/index.js 文件內容為templateFile指定的內容
          type: 'add',
          path: 'src/components/{{name}}/index.js',
          templateFile: 'plop-templates/functionComponentWithLessPage.hbs',
            // 如果模板文件內容少，可以直接使用template指定
            // template:""
            // 在將文件輸出到硬盤前會調用transform函數
            // transform:()=>""
            // 當運行這個actions，data會合并到prompt answers。
            // data:{}
            //...其他不常用參數請查看文檔
    }，{
      // 修改src/index.js文件中的內容，將 pattern 匹配到的內容，修改為 template 的內容
      type: 'modify',
      path: 'src/index.js',
      pattern: /(/* injectinfo */)/,
      template: '$1
console.log(111);',
    },{
    // 修改src/index.js文件中的內容，在 pattern 匹配到的內容后追加 template 的內容
      type: 'append',
      path: 'src/route.config/index.js',
      pattern: //* inject *//,
      template: 'console.log(666);',
    }],
  }
};

prompts

prompts數組里的type除了可以是input，還可以是input, number, confirm, list, rawlist, expand, checkbox, password, editor。當然也是支持inquirer插件的。

prompts數組會直接傳遞給inquirer，所以更多配置請參考 https://github.com/SBoudrias/Inquirer.js

actions

actions數組內的type，plop默認提供了4中Add，AddMany，Modify，Append。
如果actions需要根據prompts的answer來決定，那么可以使用動態actions，示例如下。

// 示例
module.exports = function (plop) {
  plop.setGenerator('fc_page', {
    description: 'application fc_page logic',
    prompts: [{
      type: 'confirm',
      name: 'needLess',
      message: '是否需要樣式文件（默認需要）',
      default:true,
    }],
    actions(data) {
      if (data.needLess) {
        return [];
      }
      return [];
    },
  });
};

setPrompt

用于使用inquirer插件來擴展prompts

// 為 prompt 增加目錄選擇功能
const promptDirectory = require('inquirer-directory');
module.exports = function (plop) {
    plop.setPrompt('directory', promptDirectory);
    plop.setGenerator('test', {
        prompts: [{
            type: 'directory',
            ...
        }]
    });
};

setActionType

在plopfile中添加自定義的ActionType（類似于add，addMany）

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'
        }]
    });
};

setHelper

module.exports = function (plop) {
    plop.setHelper('upperCase', function (text) {
        return text.toUpperCase();
    });

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

setPartial

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

load

loads generators, helpers and/or partials from another plopfile or npm module

https://github.com/plopjs/plop/blob/master/plop-load.md

other-methods

setWelcomeMessage：自定義WelcomeMessage
...其它的請去官網查看

高級

prompts的提示

https://plopjs.com/documentation/#3rd-party-prompt-bypass

將plop集合到自己的CLI項目中

https://plopjs.com/documentation/#wrapping-plop

思考

通過內置的action和自己擴展的action，加上前端的一切周邊工具，比如nodejs、babel，基本可以使得plop可以實現任何的功能，不過具體是先到什么程度，怎樣去用還需要根據具體的項目去權衡。

如果將toB的前端項目的業務邏輯抽離出代碼模板，那么我想應該是可以實現如下功能的。

比如：

從一個表格頁的模板自動生成一個純展示的表單頁。我們只需要配置好接口和需要展示的內容，比如頁面的邏輯代碼，ajax請求有關代碼的自動生成，路由配置文件的自動修改等？之后在針對于代碼做修改，即可實現需求
我們需要創建一個表單頁，是否可以直接通過命令行指定下，與表單相關的接口，然后就將表單有關的代碼自動生成出來，之后再在模板代碼上做修改以實現具體的需求

這樣可以將更多的工作去交給自動化去處理。大量提升開發效率。不過，事情沒有面面俱到的，可能做之前還要結合實際的場景來決定適用到什么程度。

比如：

項目的功能模塊的相似程度，比如toB的業務往往更容易抽象出模板，且模板也更加通用。
對于原有項目的代碼侵入性，因為如果涉及到修改現有文件，可能需要對現有文件做標記，比如在js中添加特殊的注釋。
項目處于的階段，比如是高速迭代，還是維護。在實際的開發中是否會有大量的類似代碼對我們的開發工作造成困擾。
業務邏輯是否復雜多變。

對于這個工具，我感覺做一些類似于頁面的代碼模板生成還是挺好的，尤其時對于大多數toB項目來說，每個頁面的邏輯其實差距不大，主要也就是列表、表單、表格、之類的東西。通過命令行交互來代替之前的復制、粘貼、手動修改，我想還是會提高一定的效率的。

總結

以上是生活随笔為你收集整理的前端自动化工具plopjs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。