plop使用

一、plop介绍：

1. 官方文档：Learning to Plop : PLOP

CSDN plop快速入门：Plop快速入门_vimin_M的博客-CSDN博客_setgenerator

2. 应用场景

需求：后台管理系统，增加一个列表：查询条件，翻页列表，点击进入详情页面。

背景：项目中已经有一个其他列表和详情的完整功能。

目的：使用plop，5秒生成一个完整的可运行的列表和详情，稍微修改接口地址和路由就可以访问。

3. 操作步骤

底层逻辑：plop旨在根据命令行输入参数和模板文件，自动化创建新组件。

1. 安装
2. 根目录创建plopfile.js
3. 创建模板
4. plopfile.js中配置生成文件和模板文件对应目录关系
5. 配置scripts，package.json中添加"plop": "plop"。
6. tnpm run plop
7. 根据控制台提示，输入参数值
8. 生成想要的文件目录和文件

二、安装

1. 安装命令：

tnpm install -g plop

2. 可能报错及sudo解决：

sudo tnpm install -g plop

3. 查看plop版本：安装成功！

$plop -v
3.1.1

三、创建plopfile.js

1. 根目录创建plopfile.js文件

export default function (plop) {
  // controller generator
  plop.setGenerator('addList', {
    description: '生成列表',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '请输入新增列表英文定义'
      },
      {
        type: 'input',
        name: 'desc',
        message: '请输入新增列表的中文注释'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/pages/{{name}}/List/index.js',
        templateFile: 'plopTemp/List/index.hbs'
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/List/models/models.js',
        templateFile: 'plopTemp/List/models/models.hbs'
      },
    ],
  });
};

2. 更复杂的plopfile.js例子：plop/plopfile.js at main · plopjs/plop · GitHub

3. api介绍

prompts数组对象详解：https://github.com/SBoudrias/Inquirer.js/#question

四、创建模板

Handlebars 是一种简单的模板语言。使用{{变量名}}替换新列表特有的名称。

handlebars CSND：Handlebars 简介_hjb2722404的博客-CSDN博客_handlebars

添加scripts命令

package.json文件的scripts对象中添加"plop": "plop"。

"scripts": {
    "plop": "plop"
}

五、运行

1. tnpm run plop或者 plop addList

1. 1. 其中，addList为plopfile.js中setGenerator方法，第一个参数的名字。

1. 可能的报错：修改扩展名为.mjs。如：plopfile.js改成plopfile.mjs。

六、根据控制台提示，输入参数

七、生成想要的文件目录和文件