用 Plop 加快项目相似代码生成

1. Plop 简单介绍

Plop是一个小型生成器框架，比如你要创建路由、控制器、组件等代码时，它就用得上了，而且你可以高度定制化它。

2. 安装

使用自己喜欢的 node 包管理工具安装即可，也可全局安装它。如：

pnpm install plop -D

在 package.json 的 scripts 中添加命令 "plop": "plop"。

3. vue3 项目中使用 plop 示例

3.1 项目根下创建plopfile.cjs

module.exports = function (plop) {
  plop.setWelcomeMessage("请选择需要创建的模式：");
  plop.setGenerator("component", require("./plop-templates/component/prompt.cjs"));
};

3.2 目录/plop-templates/下创建模板目录及模板文件

plop-templates/component/index.hbs 内容：

<script setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}>
</script>

<template>
  <div>
  </div>
</template>

<style lang="scss" scoped>
// scss
</style>

plop-templates/component/prompt.cjs 内容：

const fs = require('fs')

function getFolder(path) {
  const components = []
  const files = fs.readdirSync(path)
  files.forEach((item) => {
    const stat = fs.lstatSync(`${path}/${item}`)
    if (stat.isDirectory() === true && item !== 'components') {
      components.push(`${path}/${item}`)
      components.push(...getFolder(`${path}/${item}`))
    }
  })
  return components
}

module.exports = {
  description: '创建组件',
  prompts: [
    {
      type: 'confirm',
      name: 'isGlobal',
      message: '是否为全局组件',
      default: false,
    },
    {
      type: 'list',
      name: 'path',
      message: '请选择组件创建目录',
      choices: getFolder('src/views'),
      when: (answers) => {
        return !answers.isGlobal
      },
    },
    {
      type: 'input',
      name: 'name',
      message: '请输入组件名称',
      validate: (v) => {
        if (!v || v.trim === '')
          return '组件名称不能为空'
        else
          return true
      },
    },
  ],
  actions: (data) => {
    let path = ''
    if (data.isGlobal)
      path = 'src/components/{{properCase name}}/index.vue'
    else
      path = `${data.path}/components/{{properCase name}}/index.vue`

    const actions = [
      {
        type: 'add',
        path,
        templateFile: 'plop-templates/component/index.hbs',
      },
    ]
    return actions
  },
}

4. 命令使用

在项目目录下，使用包管理命令，执行 plop 命令，如：

pnpm plop

随后会以交互方式根据 component 模板文件生成 component 文件至相应目录。
是不是非常简单呢？当然，模板文件很复杂，你还需要学会使用 handlebars 语法，一般模板文件需求也不会很复杂，使用的时候查 plop 和 handlebars 文档，功能够用就行，学习成本较低。

参考资料：
[1] https://plopjs.com/documentation/
[2] https://handlebarsjs.com/zh/guide/