前端一键生成初始化文件，认准 plop 工具

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

plop: https://www.npmjs.com/package/plop

安装

yarn add plop --dev

安装完成后在项目根目录下创建 plopfile.js 文件

const promptDirectory = require('inquirer-directory')
const pageGenerator = require('./template/page/prompt')
const apisGenerator = require('./template/apis/prompt')
module.exports = function (plop) {
    plop.setPrompt('directory', promptDirectory)
    plop.setGenerator('page', pageGenerator)
    plop.setGenerator('apis', apisGenerator)
}

创建模板文件

位置 /template/page/

index.hbs

<template>
    <section>
       
    </section>
</template>

<script>
export default {
    name: '{{ name }}',
    data() {
        return {}
    },
    methods: {
        
    }
}
</script>

prompt.js

const path = require('path')

const notEmpty = (name) => {
    return (v) => {
        if (!v || v.trim === '') {
            return `${name} is required`
        } else {
            return true
        }
    }
}

module.exports = {
    description: 'generate vue template',
    prompts: [
        {
            type: 'directory',
            name: 'from',
            message: 'Please select the file storage address',
            basePath: path.join(__dirname, '../../src/views')
        },
        {
            type: 'input',
            name: 'fileName',
            message: 'file name',
            // 表单校验
            validate: notEmpty('fileName')
        },
        {
            type: 'input',
            name: 'name',
            message: 'name',
            validate: notEmpty('name')
        },
        // 当存在多选的情况可以使用checkbox类型
        //{
        //    type: 'checkbox',
        //    name: 'types',
        //    message: 'api types',
        //    choices: () => {
        //        return ['create', 'update', 'get', 'delete', 'check', 'fetchList', 'fetchPage'].map((type) => ({
        //            name: type,
        //            value: type,
        //            checked: true
        //        }))
        //    }
        //}
    ],
    actions: (data) => {
        const { fileName, name, from } = data
        const filePath = path.join('src/views', from, fileName + '.vue')
        const actions = [
            {
                type: 'add',
                path: filePath,
                templateFile: 'template/page/index.hbs',
                data: { name }
            }
        ]
        return actions
    }
}

示例

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

• 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' 
}]