安裝

yarn add plop --dev

項目根目錄創(chuàng)建plopfile.js 文件,定義腳手架的任務

// Plop 入口文件 需要導出一個函數(shù)
// 此函數(shù)接收一個 plop 對象, 用于創(chuàng)建生成器的任務
module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component', // 描述
    prompts: [ // 指定generator工作的時候發(fā)出的命令行問題
      {
        type: 'input', // 輸入方式
        name: 'name', // 返回值的健
        message: 'component name', // 提示
        default: 'MyComponent' // 默認答案
      }
    ],
    actions: [ // 生成器完成命令行交互之后需要執(zhí)行的動作, 每個對象就是動作對象
      {
        type: 'add', // 添加一個全新的文件
        path: 'src/components/{{name}}/{{name}}.js', // 被添加到的具體的路徑, name就是 prompts 的name取值
        templateFile: 'plop-templates/component.hbs' // 本次添加文件的模版文件
      },
      {
        type: 'add', 
        path: 'src/components/{{name}}/{{name}}.css', 
        templateFile: 'plop-templates/component.css.hbs'
      }
    ]
  }) 
}

項目根目錄創(chuàng)建模版文件

plop-templates/component.hbs
plop-templates/component.css.hbs
component.hbs文件

import React from 'react';
class {{name}} extends React.Component{
    render(){
        return(
            <h1 className="{{name}}">{{name}}</h1>
        )
    }
}
export default {{name}}

component.css.hbs文件

.{{name}} {

}

終端命令行輸入
yarn plop component

image.png

image.png

image.png

總結

• 將plop模塊作為項目的開發(fā)依賴安裝
• 在項目的根目錄新建plopfile.js文件
• 在plopfile.js文件定義腳手架任務
• 編寫用于生成特定類型文件的模板
• 通過plop提供的CLI 運行腳手架任務