用 Plop 加快项目相似代码生成
1. Plop 简单介绍
Plop是一个小型生成器框架，比如你要创建路由、控制器、组件等代码时，它就用得上了，而且你可以高度定制化它。
2. 安装
使用自己喜欢的 node 包管理工具安装即可，也可全局安装它。如：
|
1 |
pnpm install plop -D |
在 package.json 的 scripts 中添加命令 "plop": "plop"。
3. vue3 项目中使用 plop 示例
3.1 项目根下创建plopfile.cjs
|
1 2 3 4 |
module.exports = function (plop) { plop.setWelcomeMessage("请选择需要创建的模式："); plop.setGenerator("component", require("./plop-templates/component/prompt.cjs")); }; |
3.2 目录/plop-templates/下创建模板目录及模板文件
plop-templates/component/index.hbs 内容：
|
1 2 3 4 5 6 7 8 9 10 11 |
<script setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}> </script> <template> <div> </div> </template> <style lang="scss" scoped> // scss </style> |
plop-templates/component/prompt.cjs 内容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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 命令，如：
|
1 |
pnpm plop |
随后会以交互方式根据 component 模板文件生成 component 文件至相应目录。
是不是非常简单呢？当然，模板文件很复杂，你还需要学会使用 handlebars 语法，一般模板文件需求也不会很复杂，使用的时候查 plop 和 handlebars 文档，功能够用就行，学习成本较低。
参考资料：
[1] https://plopjs.com/documentation/
[2] https://handlebarsjs.com/zh/guide/
微信扫描下方的二维码阅读本文
