用 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/