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)}

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

    1. 模板参数：

  1. 条件判断：

配置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的应用，可能看不出来到底能带来的多大价值，我也是举荐在适宜的时候来引入到我的项目中，不要为了引入而做一些没有价值的模板，更多简单的性能一起去查阅文档学习呀。

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