其他分享
首页 > 其他分享> > Plop快速入门

Plop快速入门

作者：互联网

Plop快速入门

什么是Plop

Plop是一个小而美的脚手架工具，它主要用于创建项目中特定类型的文件，Plop主要集成在项目中使用，帮助我们快速生成一定规范的初始模板文件。比如我们去书写Vue的组件，如果每次都是手动去写组件的初始内容，会比较繁琐，有可能会出错，且每个人写的规范可能都不一样。这时候我们就可以用Plop来创建规范的Vue组件的初始内容，方便快捷，易于管理且规范。

基本使用

项目目录

首先打开我们的项目，这里我的项目是随便写的，不具参考意义
在这里插入图片描述

安装Plop

首先我们需要在项目中安装Plop模块

yarn add plop --dev

然后等待安装完成即可

plopfile.js

然后再项目跟目录下创建一个plopfile.js文件，这是plop工作时的入口文件，该文件需要导出一个函数，并且该函数接收一个plop对象
示例

// plop 的入口文件
// 需要导出一个函数，函数接收一个plop对象，用于创建生成器任务

module.exports = plop => {
  // setGenerator可以设置一个生成器，每个生成器都可用于生成特定的文件
  // 接收两个参数，生成器的名称和配置选项
  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}}.vue',
      // template 模板的文件路径，目录下的文件遵循hbs的语法规则
      templateFile: 'plop-templates/component.vue.hbs'
    }]
  })
}

setGenerator

plop对象下有一个setGenerator方法，这个方法用于创建一个生成器，主要就是帮助我们去生成特定的文件，setGenerator接收两个参数name和option

执行生成器
下面该示例就是执行我们创建的生成器component
在这里插入图片描述

option

description

生成器的描述信息

prompts

将来生成器工作时发起的询问，它是一个数组，每个对象都是一次询问

prompts: [{
  // 类型
  type: 'input',
  // 用于接收用户输入参数的变量名，将来也会使用到hbs模板中
  name: 'name',
  // 询问提示信息
  message: 'component name',
  // 默认值
  default: 'MyComponent'
}],

在这里插入图片描述

actions

这是命令行询问结束后执行的操作，它同样是一个对象数组，每个对象都是一个动作对象。

actions: [{
  // 动作类型
  type: 'add',
  // 生成文件的输出路径
  path: 'src/components/{{name}}/{{name}}.vue',
  // template 一般放置再根目录的plop-templates目录下，下面的文件遵循hbs的语法规则
  templateFile: 'plop-templates/component.vue.hbs'
}]

path
path中的{{name}}是一种变量书写形式，它对应的就是prompts对象数组中的name接收的值，假如name=‘Test1’，那这里的path就相当于scr/components/Test1/Test1.vue

templateFile
templateFile 就是该文件的模板文件路径
在这里插入图片描述
我们在模板中同样可以使用{{变量名称}}，的方式来传入我们在prompts中接收的变量，如
在这里插入图片描述
多个动作
同样的，如果我们希望生成多个文件，就可以配置多个动作对象和对应的模板即可即可，如
我们增加一个css文件
在这里插入图片描述

actions: [{
  type: 'add',
  path: 'src/components/{{name}}/{{name}}.vue',
  templateFile: 'plop-templates/component.vue.hbs'
}, {
  type: 'add',
  path: 'src/components/{{name}}/index.css',
  templateFile: 'plop-templates/component.css.hbs'
}]

使用

plopfile.js

// plop 的入口文件
// 需要导出一个函数，函数接收一个plop对象，用于创建生成器任务

module.exports = plop => {
  // setGenerator可以设置一个生成器，每个生成器都可用于生成特定的文件
  // 接收两个参数，生成器的名称和配置选项
  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}}.vue',
      // template 一般放置再根目录的plop-templates目录下，下面的文件遵循hbs的语法规则
      templateFile: 'plop-templates/component.vue.hbs'
    }, {
      type: 'add',
      path: 'src/components/{{name}}/index.css',
      templateFile: 'plop-templates/component.css.hbs'
    }]
  })
}

执行
在这里插入图片描述
目录结果
在这里插入图片描述

标签：文件,plop,component,生成器,name,入门,快速,hbs,Plop
来源： https://blog.csdn.net/weixin_45449964/article/details/113997230