关于前端:使用PlopJs让开发变得更高效

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

在当初的前端圈外面，大多数的框架，库都会给你配一个 CLI 来应用，这样就能够创立一个最小可用的程序进去。还有一些封装的比较完善的前端开源我的项目，比方一些治理平台时我的项目就会提供页面级别，组件级别的相似 CLI 的性能来创立根本的构造模板，因为咱们晓得在治理平台这种软件中页面的大抵构造格调都高度一致，所以这个时候如果通过工具的实现反复的工作是相当适合的，有这么一款工具就最为举荐那就是plopjs。

Plop 是一个轻量型的工具，能够依照简略的问答来生成代码也能够随着我的项目迭代随时更改，使得团队开发的内容保持一致，也节俭的根底、反复工作所话费的工夫，接下来就通过几个案例来演示一下 Plop 的最佳实际。

整顿的参考纲要：

https://www.processon.com/view/link/6214b49df346fb06ecfc9804

前置配置：

1. 依赖装置：npm install --save-dev plop；
2. 配置 scripts："new": "plop"，应用 yarn new 或npm run new创立；
3. 我的项目构造：

演示我的项目的目录构造如下，咱们将所有用到的模板搁置到 plop-templates 文件夹，每套模板都蕴含一个 hbs 格局的模板文件和一个 prompt.js 的交互收集解决模块，再对立的注册到我的项目根目录下的 plopfile.js 文件：

plopjs-demo
    |-- plop-templates
      |-- controller
        |-- index.hbs
      |-- prompt.js
  |-- src
      |-- controller
  |-- plopfile.js
  |-- package.json

注册模板的代码参考如下：

const controllerGenerator = require('./plop-templates/controller/prompt')

module.exports = function(plop) {
  // 将每次新建的模板导入后通过 plop 进行构建
  plop.setGenerator('controller', controllerGenerator)
}

4. 因为模板的定义应用到了 handlebarsjs，所以这里简略的介绍两个必定要用的，一个是模板参数另一个是条件判断，图片来自它的官网：

   1. 模板参数：

2. 条件判断：

配置 Controller 模板：

须要实现的性能：

1. 自定义 Controller 名称（必须的）；
2. 抉择继承的 Controller 继承的对象；
3. 输入文件：src/controller/<filename>.js；
4. 输入文件的根底内容中显示以后 Controller 名称。

上面是两段代码是 EggJs 中 Controller 的根本示例，第二段中扭转了继承的对象并实现了一些通用的数据封装，咱们以此来编写 Controller 的.hbs 文件：

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {async index() {const { ctx} = this;
    ctx.body = '<h3>HomeController</h3>';
  }
}

module.exports = HomeController;

'use strict';

const BaseController = require('./base');;

class HomeController extends BaseController {async index() {const { ctx} = this;
    ctx.body = '<h3>HomeController</h3>';
  }
}

module.exports = HomeController;

编写完的模板就如上面所示，有两点须要阐明：

1. 留神不要感觉太长就换行；

2. 在应用用户输出的 name 是特意做了规范性的转换，其余的转换格局可参考代码下方的Case Modifiers。

   'use strict';
   {{#if isDefault}}
   const Controller = require('egg').Controller;
   {{/if}}
   {{#if isBase}}
   const BaseController = require('./base');
   {{/if}}
   
   class {{properCase name}}Controller extends {{#if isDefault}}Controller{{/if}}{{#if isBase}}BaseController{{/if}} {async index() {const { ctx} = this;
    ctx.body = '<h3>{{properCase name}}Controller</h3>';
     }
   }
   
   module.exports = {{properCase name}}Controller;
   

   Case Modifiers

• camelCase: changeFormatToThis
• snakeCase: change_format_to_this
• dashCase/kebabCase: change-format-to-this
• dotCase: change.format.to.this
• pathCase: change/format/to/this
• properCase/pascalCase: ChangeFormatToThis
• lowerCase: change format to this
• sentenceCase: Change format to this,
• constantCase: CHANGE_FORMAT_TO_THIS

• titleCase: Change Format To This

  实现 Controller 的交互收集：

  须要实现的性能：

1. 收集 Controller 名称（必须的）；
2. 抉择 Controller 继承类。

最小交互模块代码示例和阐明：

"use strict";

module.exports = {
  // 交互开始的提示信息
  description: "generate a controller",
  prompts: [// 配置须要答复的问题],
  actions: (data) => {
    // 当答复结束后按如下格局返回，type 为 add 示意咱们要新增，更多的形式要参考 https://plopjs.com/
    const actions = [
      {
        type: "add",
        path: `app/controller/${name}.js`,
        templateFile: "plop-templates/controller/index.hbs",
        data: {},},
    ];
    return actions;
  },
};

残缺的交互模块代码：

"use strict";

module.exports = {
  description: "generate a controller",
  prompts: [
    {
      type: "input",
      name: "name",
      message: "controller name please",
      validate: (v) => {return !v || v.trim() === "" ? `${name} is required` : true;
      },
    },
    {
      type: "list",
      name: "baseClass",
      message: "base-class type please:",
      choices: [
        {
          name: "Choice Default",
          value: "default",
          checked: true,
        },
        {
          name: "Choice Base",
          value: "base",
          checked: false,
        },
      ],
    },
  ],
  actions: (data) => {const name = "{{name}}";
    const actions = [
      {
        type: "add",
        path: `src/controller/${name}.js`,
        templateFile: "plop-templates/controller/index.hbs",
        data: {
          name,
          isDefault: data.baseClass === "default",
          isBase: data.baseClass === "base",
        },
      },
    ];

    return actions;
  },
};

注册模板到 plopfile.js：

当咱们把我的项目波及到得 controller，service，model，schedule 都通过模板实现后，咱们再理论开发中将间接应用终端来创立我的项目的各个组件。

const controllerGenerator = require('./plop-templates/controller/prompt')
const modelGenerator = require('./plop-templates/model/prompt')
const scheduleGenerator = require('./plop-templates/schedule/prompt')
const serviceGenerator = require('./plop-templates/service/prompt')

module.exports = function(plop) {plop.setGenerator('controller', controllerGenerator)
  plop.setGenerator('model', modelGenerator)
  plop.setGenerator('schedule', scheduleGenerator)
  plop.setGenerator('service', serviceGenerator)
}

结尾阐明：

此次通过最简略的演示来讲了 PlopJs 的应用，可能看不出来到底能带来的多大价值，我也是举荐在适宜的时候来引入到我的项目中，不要为了引入而做一些没有价值的模板，更多简单的性能一起去查阅文档学习呀。

欢送关注我的公众号“前端小鑫同学”，原创技术文章第一工夫推送。