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

原创已于 2022-09-30 15:15:51 修改 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js

于 2022-09-29 18:16:47 首次发布

开发专栏收录该内容

37 篇文章

订阅专栏

Plop.js是一个小巧的生成器框架，适用于快速创建如路由、控制器和组件等代码。在Vue3项目中，通过安装并配置Plop，可以自定义生成组件的模板。例如，创建一个包含模板文件的plopfile.cjs，然后定义交互式提示来选择组件路径和名称。在命令行运行plop命令，将根据模板生成组件文件。Plop结合Handlebars语法，使代码生成更高效，学习成本低。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/