Plop

Plop 入门：代码生成器是什么

了解 Plop 代码生成器的基本概念与适用场景，学会安装并运行第一个文件生成任务。

🎯 引言

学完这篇文章，你将明白 Plop 是什么、它能帮你解决什么问题，以及如何在项目里快速上手。我们会一起安装 Plop，配置第一个生成器，并自动创建一个文件。

🧱 什么是 Plop

在日常开发中，我们经常要创建很多结构相似的文件，比如：

Vue 组件：UserCard.vue、OrderList.vue、ProductDetail.vue……
API 接口文件：getUser.js、createOrder.js、updateProduct.js……
工具函数：formatDate.js、debounce.js、cloneDeep.js……

如果每次都手动新建文件、复制旧文件、改类名、改文件名，既枯燥又容易出错。

Plop 是一个轻量的“代码生成器”框架。它可以根据你提前写好的模板，通过几个简单的交互问题，自动帮你生成符合规范的文件。

你可以把它理解成：填空题 + 复印机。先准备好一份标准试卷（模板），再回答几个问题（变量），最后自动复印出一份填好答案的文件。

✨ 为什么选择 Plop

Plop 有以下几个突出的优点：

简单易上手：配置文件很小，几行代码就能跑起来。
模板驱动：复用 Handlebars 语法，和前端模板写法一致。
交互友好：通过命令行提问获取变量，比如文件名、组件名。
统一规范：团队内所有人生成的文件结构一致，减少风格差异。
生态轻量：不依赖复杂构建工具，纯 Node.js 即可运行。

Plop 特别适合用来生成“有固定套路”的文件。如果你的项目里某类文件写法基本一致，就可以考虑用 Plop 自动化。

🚀 安装 Plop

本课程环境使用 Node.js v22.0.0，对应的 Plop 版本为 4.0.5。

新建一个项目并安装：

mkdir plop-demo
cd plop-demo
npm init -y
npm install plop@4.0.5 --save-dev

安装完成后，可以通过 npx plop 运行它：

npx plop

Plop 4.x 默认使用 ES Modules（ESM）。本课程的示例统一使用 plopfile.mjs 作为配置文件，这样不需要修改 package.json 的 type 字段。

📦 第一个 Plop 示例

我们来看一个最简示例，自动创建一个 Vue 组件文件。

1. 创建配置文件

在项目根目录下新建 plopfile.mjs：

plopfile.mjs

export default function (plop) {
    plop.setGenerator('component', {
        description: '创建一个 Vue 组件',
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: '请输入组件名称'
            }
        ],
        actions: [
            {
                type: 'add',
                path: 'src/components/{{pascalCase name}}.vue',
                templateFile: 'plop-templates/component.hbs'
            }
        ]
    });
}

2. 创建模板文件

新建 plop-templates/component.hbs：

plop-templates/component.hbs

<template>
    <div class="{{kebabCase name}}">
        {{name}} 组件
    </div>
</template>

<script setup>
// {{name}} 组件逻辑
</script>

<style scoped>
.{{kebabCase name}} {
    /* 组件样式 */
}
</style>

3. 运行生成器

执行命令：

npx plop component

Plop 会询问组件名称，输入 UserInfo 后回车，就会在 src/components/UserInfo.vue 生成文件。

生成的内容类似这样：

src/components/UserInfo.vue

<template>
    <div class="user-info">
        UserInfo 组件
    </div>
</template>

<script setup>
// UserInfo 组件逻辑
</script>

<style scoped>
.user-info {
    /* 组件样式 */
}
</style>