前情
开发是个创造型的职业，也是枯燥的职业，因为开发绝大多数都是每天在业务的代码中无法自拨，说到开发工作，就永远都逃不开新建文件的步骤，特别现在组件化开发胜行，每天都是在新建新建组件的道路上一去不返，我们做的最多就是直接拷贝一个旧代码组件，重命下名再删减删减完成新组件的创建
思考
对于这种组件，整体基础结构是一样的，我们可不可以有更好的方式一键生成了，就避免了反反复的拷贝删减动作，有一天我在逛博客论坛的时候我发现了Plop.js，发现它正是解决这种场景的
Plop.js介绍
官网：Consistency Made Simple : PLOP
官网的介绍：Plop is a little tool that saves you time and helps your team build new files with consistency，翻译就是：Plop是一个小工具，可以节省您的时间，并帮助您的团队构建一致的新文件
工作主流程：我用过后对它的工作整体流程理解是这样的，通过plopfile.js定义一个一个生成器，每一个生成器根据你传的配置再调用指定目录（一般是plop-template目录）下的hbs模板文件，再通过模板渲染生成最终符合特定结构的文件
需求描述
最近我手上的项目主要是uni-app项目，我们就以uni-app项目做实验，我每天可能都会重复的工作有新建组件、页面、API接口文件，如下图所示
实战
生成组件
定义组件生成器：
module.exports = function (plop) { // 导入所需模块 const { exec } = require('child_process'); const path = require('path'); const fs = require('fs'); // 定义打开文件的函数 function openFile(filePath) { const fullPath = path.resolve(process.cwd(), filePath); if (fs.existsSync(fullPath)) { console.log(`n正在打开文件: ${fullPath}`); // 根据操作系统选择打开方式 const isWin = process.platform === 'win32'; // Windows - 尝试使用cursor打开，如果你是用的vs code，请把cursor换成code即可 exec(`cursor "${fullPath}"`, (error) => { if (error) { // 如果VS Code不可用，尝试使用默认程序打开 console.log(`打开文件失败: ${error},文件路径: ${fullPath}`); } }); } return '文件已创建'; } // 新建组件 组件生成器 plop.setGenerator("component", { description: "新建组件", prompts: [ { type: "input", name: "name", message: "要新建的组件名:", }, ], actions: [ { type: "add", path: "components/{{pascalCase name}}/{{pascalCase name}}.vue", templateFile: "plop-templates/Component.vue.hbs", }, // 实现生成文件后主动打开的功能 function(answers) { const filePath = `components/${plop.getHelper('pascalCase')(answers.name)}/${plop.getHelper('pascalCase')(answers.name)}.vue`; return openFile(filePath); } ], }); }; 这里多做了一个功能，当生成完页面后，使用cursor编辑器主动打开当前生成的文件，其中openFile就是打开当前生成的文件，这个可有可无，加了体验感觉会好一些
模板文件plop-templates/Component.vue.hbs：
<template> <div @click="handleClick">{{ msg }}-{{ msgIn }}</div> </template> <script setup> import { ref, onMounted } from 'vue'; defineOptions({ name: "{{camelCase name}}" }) const props = defineProps({ msg: { type: String, default: 'Hello uniapp!' } }) const emit = defineEmits(['update:msg']); const msgIn = ref('Hello world!'); const handleClick = () => { emit('update:msg', props.msg + ' ' + msgIn.value); } onMounted(() => { console.log('---- onMounted ----'); }) </script> <style lang="scss"> </style> 演示动图：
生成页面
定义生成页生成器：
module.exports = function (plop) { // 导入所需模块 const { exec } = require('child_process'); const path = require('path'); const fs = require('fs'); // 定义打开文件的函数 function openFile(filePath) { const fullPath = path.resolve(process.cwd(), filePath); if (fs.existsSync(fullPath)) { console.log(`n正在打开文件: ${fullPath}`); // 根据操作系统选择打开方式 const isWin = process.platform === 'win32'; // Windows - 尝试使用cursor打开 exec(`cursor "${fullPath}"`, (error) => { if (error) { // 如果VS Code不可用，尝试使用默认程序打开 console.log(`打开文件失败: ${error},文件路径: ${fullPath}`); } }); } return '文件已创建'; } // 添加页面到pages.json function addPageToConfig(answers) { try { const pagesConfigPath = path.resolve(process.cwd(), 'pages.json'); if (!fs.existsSync(pagesConfigPath)) { return '无法找到pages.json'; } // 读取pages.json文件内容 let fileContent = fs.readFileSync(pagesConfigPath, 'utf8'); // 查找pages数组的结束括号位置 const lastBracketIndex = fileContent.lastIndexOf(']'); if (lastBracketIndex === -1) { return '无法在pages.json中找到pages数组'; } // 检查pages数组是否为空 const pagesArrayContent = fileContent.substring( fileContent.indexOf('"pages"'), lastBracketIndex ); // 是否需要添加逗号（如果数组中已有内容） const needComma = pagesArrayContent.includes('{'); // 新页面的配置信息 const newPageConfig = `${needComma ? ',' : ''} { "path": "pages/${plop.getHelper('pascalCase')(answers.name)}/${plop.getHelper('pascalCase')(answers.name)}", "style": { "navigationBarTitleText": "${answers.title}" } }`; // 将新页面添加到数组末尾 fileContent = fileContent.substring(0, lastBracketIndex) + newPageConfig + fileContent.substring(lastBracketIndex); // 保存更新后的文件 fs.writeFileSync(pagesConfigPath, fileContent, 'utf8'); return 'pages.json已更新'; } catch (error) { console.error('更新pages.json时出错:', error); return `更新配置失败: ${error.message}`; } } // 新建页面 plop.setGenerator("page", { description: "新建页面", prompts: [ { type: "input", name: "name", message: "要新建的页面名:", }, { type: "input", name: "title", message: "要新建的页面标题:", }, ], actions: [ { type: "add", path: "pages/{{pascalCase name}}/{{pascalCase name}}.vue", templateFile: "plop-templates/page.vue.hbs", }, addPageToConfig, function(answers) { const filePath = `pages/${plop.getHelper('pascalCase')(answers.name)}/${plop.getHelper('pascalCase')(answers.name)}.vue`; return openFile(filePath); } ], }); }; 生成页面比生成组件需要多做一个功能，就生成页面后，需要向pages.json中添加路由申明，其中addPageToConfig就实现路由申明的
模板文件plop-templates/page.vue.hbs：
<template> <div>{{ msg }}</div> </template> <script setup> import { ref, onMounted } from 'vue'; defineOptions({ name: "{{camelCase name}}" }) const msg = ref('Hello uniapp!'); onMounted(() => { console.log('---- onMounted ----'); }) </script> <style lang="scss"> </style> 演示动图：
生成接口文件
定义接口文件生成器：
module.exports = function (plop) { // 导入所需模块 const { exec } = require('child_process'); const path = require('path'); const fs = require('fs'); // 定义打开文件的函数 function openFile(filePath) { const fullPath = path.resolve(process.cwd(), filePath); if (fs.existsSync(fullPath)) { console.log(`n正在打开文件: ${fullPath}`); // 根据操作系统选择打开方式 const isWin = process.platform === 'win32'; // Windows - 尝试使用cursor打开 exec(`cursor "${fullPath}"`, (error) => { if (error) { // 如果VS Code不可用，尝试使用默认程序打开 console.log(`打开文件失败: ${error},文件路径: ${fullPath}`); } }); } return '文件已创建'; } // 新建接口文件 plop.setGenerator("api", { description: "新建接口文件", prompts: [ { type: "input", name: "name", message: "要新建的接口文件名:", }, ], actions: [ { type: "add", path: "api/{{pascalCase name}}.js", templateFile: "plop-templates/api.js.hbs", }, function(answers) { const filePath = `api/${plop.getHelper('pascalCase')(answers.name)}.js`; return openFile(filePath); } ], }); }; 模板文件plop-templates/api.js.hbs：
import request from "../utils/request.js"; /** * 获取数据 */ export const queryList = async (id) => { return request.request(`/api/test/${id}`, {}, { method: "GET" }) }; 至此，生成模板文件的需求也就基本完成了，生成api接口文件就不录屏了，跟生成组件基本是一样的流程
代码我上传到gitee仓库，可以clone下来跑跑试试，仓库地址：xiewu/plopjsTest
小结
通过上面几个示例我相信你已经基本了解了Plop.js的大致使用方式，上面示例工程还是可以优化，对于uni-app项目，很大可能需要代码分包的，而上面代码只是实现了在主包中增加组件，这我也尝试做了，你可以把上面代码clone下来后切换到feat-complete分支即可。
这里只是抛砖引玉，对于聪明的你，也一定知道怎么把Plop.js应用到自己的项目中了，也期待你的留言和分享👀
Plop.js入门好文推荐：
Plop.js：一键生成代码模板，提升开发效率的利器-CSDN博客
前端工程化-使用 plop 生成项目模板文件
