学习记录: Plop 的基本使用(快速创建同类型的文件)

安装

yarn add plop --dev

项目根目录创建plopfile.js 文件,定义脚手架的任务

// Plop 入口文件 需要导出一个函数
// 此函数接收一个 plop 对象, 用于创建生成器的任务
module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component', // 描述
    prompts: [ // 指定generator工作的时候发出的命令行问题
      {
        type: 'input', // 输入方式
        name: 'name', // 返回值的健
        message: 'component name', // 提示
        default: 'MyComponent' // 默认答案
      }
    ],
    actions: [ // 生成器完成命令行交互之后需要执行的动作, 每个对象就是动作对象
      {
        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'
      }
    ]
  }) 
}

项目根目录创建模版文件

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模块作为项目的开发依赖安装
• 在项目的根目录新建plopfile.js文件
• 在plopfile.js文件定义脚手架任务
• 编写用于生成特定类型文件的模板
• 通过plop提供的CLI 运行脚手架任务