Plop 简化重复工作流，维持团队代码一致性

前言

在我们日常开发的过程中经常会新建一下文件，并且页面的结构十分相符合；我们一般通过复制粘贴的形式去创建文件和结构。

为此我们是否应该将这种重复机械的工作交给工具，解放自己的双手呢？

plop 是一款项目模板生成器，并且它是命令式可交互的，可以通过一行代码生成我们想要的结构。

初体验

yarn add plop -D
1

添加配置

创建一个 profile.js 在你的项目根目录，plop 会根据你的 profile.js 的配置生成文件。

// profile.js
module.exports = function (plop) {
  plop.setGenerator("Basics", {
    description: "创建一个基础模板",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "请输入你的姓名",
      },
    ],
    actions: [
      {
        type: "add",
        path: "src/pages/index.vue",
        templateFile: "plop-templates/controller.hbs",
        data: {
          name: this.name,
        },
      },
    ],
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

添加模板

在根目录创建 plop-templates/controller.hbs 的模板文件，这个文件已经被 profile.js 文件引用。

// plop-templates/controller.hbs
<template>
  <div>
    Hello, {{name}}
  div>
template>
1
2
3
4
5
6

设置脚本

添加执行脚本，在 package.json => scripts 中添加命令

// package.json
"scripts": {
  "plop": "plop"
},
1
2
3
4

运行 plop

运行命令将会根据 profile.js 的配置文件运行在指定的路径生成指定的模板文件。

yarn plop

// $ plop
// ? 请输入你的姓名 不二博客
// ✔  ++ \src\pages\index.vue
// Done in 11.28s.
1
2
3
4
5
6

// /src/pages/index.vue
<template>
  <div>
    Hello, 不二博客
  div>
template>
1
2
3
4
5
6

以上就是 plop 的简单应用，接下来我们学习一下常用的 api 和属性，让 plop 变得更加强大！

创建生成器 setGenerator

setGenerator 用于创建生成器，用于用户交互式选择生成器，当 plop 只有一个生成器的情况下，直接跳过选择。

// profile.js
module.exports = function (plop) {
  plop.setGenerator("Basics Page", {
    description: "创建一个页面",
    // ...
  });
  plop.setGenerator("Basics Component", {
    description: "创建一个组件",
    // ...
  });
};
1
2
3
4
5
6
7
8
9
10
11

yarn plop

# ? [PLOP] Please choose a generator. (Use arrow keys)
# > Basics Page - 创建一个页面
#   Basics Component - 创建一个组件
1
2
3
4
5

交互式命令配置 prompts

prompts 是可交互式命令的配置，通过配置我们可以输入和选择模板的配置项。

plop 使用 Inquirer 这个库来捕获用户输入，他支持 input, number, confirm, list, rawlist, expand, checkbox, password, editor 类型的输入。

// profile.js
module.exports = function (plop) {
  plop.setGenerator("Basics Page", {
    description: "创建一个页面",
    prompts: [
      {
        type: "input",
        name: "pageName",
        message: "请输入你的页面名称",
      },
      {
        type: "confirm",
        name: "hasTs",
        message: "是否使用TypeScript",
      },
    ],
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

yarn plop
# $ plop
# ? 请输入你的页面名称 home
# ? 是否使用TypeScript Yes
1
2
3
4

执行 actions

plop 会通过 actions 的配置项去生成对应的模板，同时也可以获取到 prompts 用户输入的参数。

// profile.js
module.exports = function (plop) {
  plop.setGenerator("Basics Page", {
    description: "创建一个页面",
    prompts: [
      {
        type: "input",
        name: "pageName",
        message: "请输入你的页面名称",
      },
      {
        type: "confirm",
        name: "hasTs",
        message: "是否使用TypeScript",
      },
    ],
    actions: (data) => {
      // 命令行的配置
      const { pageName, hasTs } = data;
      let _options = [
        {
          type: "add",
          path: `src/pages/${pageName}.vue`,
          templateFile: "plop-templates/controller.hbs",
          // 将参数传给模板
          data: {
            name: pageName,
            hasTs,
          },
        },
      ];

      // 根据配置项动态添加需要生成的模板文件
      if (hasTs) {
        _options.push({
          type: "add",
          path: `src/pages/${pageName}.ts`,
          templateFile: "plop-templates/ts.hbs",
        });
      }

      return _options;
    },
  });
};
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

模板文件 hbs

在模板文件中我们可以获取到 actions 传递当模板的参数，并且进行进一步的处理。

<template>
  <div>
    {{!-- 这里是传递的name值 --}}
    Hello, {{ name }}
  div>
template>

{{!-- 这里通过 if 判断动态渲染 --}}
{#if hasTs}} lang="ts"{{/if}}>

script>
1
2
3
4
5
6
7
8
9
10
11

总结

通过命令式交互，简化工作流程，拒绝复制粘贴，减少重复机械性的工作，同时也能统一团队代码的一致性，是前端工程化实践中值得去尝试的工具。

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！