介紹

主要用於建立特定型別檔案的小工具，有點類似於yeoman中的sub-generator，一般不獨立使用，用於整合到專案當中，建立一些同型別的專案檔案

例項

在react專案中建立元件時，往往需要建立3個檔案

現在在react專案安裝plop

yarn add plop --dev

安裝完成之後，在根目錄建立plopfile.js的檔案，是入口檔案

在根目錄建立模版目錄plop-templates,在其中新增模版.hbs模版引擎型別檔案，可以通過{{ }}語法插入相應的資料

setGenerator，第一引數為模版名稱 description描述

// Plop 入口檔案，需要匯出一個函式
// 此函式接收一個 plop 物件，用於建立生成器任務

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add', // 代表新增檔案
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add', // 代表新增檔案
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add', // 代表新增檔案
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs'
      }
    ]
  })
}

總結

• 將polp模組作為 專案開發依賴安裝
• 在專案根目錄下建立一個plopfile.js檔案
• 在plopfile檔案中定義腳手架任務
• 編寫用於生成特定型別生成的模版
• 通過plop提供的cli執行腳手架任務