Plop是一個小而美的腳手架工具

Plop一般不單獨使用，而是整合到專案中，幫助我們根據模板批量生成檔案

Plop怎麼使用？

• 安裝

yarn add plop --dev

• 在專案根目錄下新增plop的入口檔案plopfile.js

// plopfile.js樣例程式碼
module.exoirts=plop=>{
  // 設定名為component的生成器
  plop.setGenerator('component',{
    description:'create a component',
    // 使用者互動
    prompt:[
      {
        type:'input',//讓使用者輸入回答問題
        name:'name',
        message:'component name？',
        default:'MyComponent'
      }
    ],
    // 使用者互動完成後執行的動作
    actions:[
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.js',
        templateFile:'plop-templates/component.hbs'//此處模板需要在專案根目錄中新增
      },
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.css',
        templateFile:'plop-templates/component.css.hbs'//此處模板需要在專案根目錄中新增
      },
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.test.js',
        templateFile:'plop-templates/component.test.hbs'//此處模板需要在專案根目錄中新增
      }
    ]
  }
}
 

新增模板檔案

在專案根目錄中新增plop-templates資料夾，並新增檔案：

• components.hbs
• components.css.hbs
• components.test.hbs

檔案中可以使用handlebars模板引擎語法

測試使用

在專案目錄開啟終端，輸入yarn plop component，根據提示輸入component的名稱，比如"componenttest",就會在專案的component目錄中新增資料夾componenttest,並生成模板檔案對應型別的檔案以及檔案內容基礎內容