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

作者: ygqygq2 分类: 开发 发布时间: 2022-09-29 18:10

1. Plop 简单介绍

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

2. 安装

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

pnpm install plop -D

package.jsonscripts 中添加命令 "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 内容:





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/

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据