使用PlopJs让开发变得更高效

简介: 使用PlopJs让开发变得更高效

   在现在的前端圈里面,大多数的框架,库都会给你配一个CLI来使用,这样就可以创建一个最小可用的程序出来。还有一些封装的比较完善的前端开源项目,比如一些管理平台时项目就会提供页面级别,组件级别的类似CLI的功能来创建基本的结构模板,因为我们知道在管理平台这种软件中页面的大致结构风格都高度一致,所以这个时候如果通过工具的完成重复的工作是相当合适的,有这么一款工具就最为推荐那就是plopjs


     Plop是一个轻量型的工具,可以按照简单的问答来生成代码也可以随着项目迭代随时更改,使得团队开发的内容保持一致,也节省的基础、重复工作所话费的时间,接下来就通过几个案例来演示一下Plop的最佳实践。


整理的参考大纲:

www.processon.com/view/link/6…1.png


前置配置:

  1. 依赖安装:npm install --save-dev plop
  2. 配置scripts:"new": "plop",使用yarn newnpm 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. 模板参数:

2.png

  1. 条件判断:

3.png


配置Controller模板:


需要实现的功能:

  1. 自定义Controller名称(必须的);
  2. 选择继承的Controller继承的对象;
  3. 输出文件:src/controller/.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)
}
复制代码

4.png


结尾说明:

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



相关文章
|
6月前
|
前端开发 NoSQL Java
全栈开发:构建高效的现代化应用程序
本文介绍了全栈开发的概念和重要性,探讨了前端、后端以及常用的编程语言(如Java、Python、C、PHP和Go)在全栈开发中的角色。通过深入剖析数据库的作用和选择,以及现代化应用程序的构建流程,读者将了解到如何利用全栈技术开发出高效、可靠的应用程序。
|
4月前
|
数据采集 开发工具 Android开发
构建高效移动应用:从开发到部署的全面指南构建高效Python爬虫的实战指南
【7月更文挑战第31天】在数字时代,移动应用已成为我们日常生活和工作不可或缺的一部分。本文将引导读者穿越移动应用开发的迷宫,探索如何从零开始构建一个高效的移动应用。我们将深入讨论移动操作系统的选择、开发工具的应用、以及实际编码过程中的最佳实践。通过本文,你不仅能够获得理论知识,还将通过代码示例加深理解,最终能够独立完成一个移动应用的构建和部署。
64 2
|
6月前
|
机器学习/深度学习 测试技术 Android开发
安卓应用程序开发:构建高效、可靠的移动体验
【5月更文挑战第27天】 在数字化时代,安卓平台的应用程序已成为连接用户和信息的重要桥梁。本文深入探讨了安卓应用开发的关键要素,包括性能优化、内存管理、用户界面设计和最新技术的集成。通过分析具体案例和提供实践策略,旨在指导开发者构建既高效又可靠的移动体验。
|
6月前
|
缓存 移动开发 监控
构建高效移动应用:跨平台框架的选择与优化策略
【4月更文挑战第16天】 在移动开发领域,跨平台解决方案的兴起为开发者带来了前所未有的机遇与挑战。本文将深入探讨跨平台移动应用框架的选择要素,并剖析性能优化的关键策略。通过对比主流框架的功能、性能和生态系统,我们得出了一套科学的选择标准。同时,文中还详细阐述了如何针对不同框架进行代码级和系统级的优化,以及如何利用工具进行性能监控和调优。这些策略不仅能提升应用性能,还能缩短开发周期,降低成本。
|
6月前
|
前端开发 开发工具 git
构建高效的前端开发环境
【2月更文挑战第2天】本文介绍了如何构建一个高效的前端开发环境,包括选择合适的开发工具、优化代码编辑和调试流程、提高团队协作效率等方面。通过采用最新的前端技术和工具,开发人员可以更快速地构建出高质量的网站和应用程序。
106 1
|
6月前
|
人工智能 监控 Windows
推荐5个高效工具,希望对你有帮助
每次发现实用的小工具,都会有种小小的成就感,这也是我喜欢收集和分享高效工具的原因。
92 0
|
6月前
|
Unix Linux Shell
分享5款简单而高效的小工具
在这个繁忙的时代,简单而高效的工具成为生活和工作中的宝贵助手。以下是五款小巧而实用的小工具,或许正是你所需的生活小搭档。
75 0
|
12月前
|
机器学习/深度学习 人工智能 JavaScript
简单又好用得高效工具分享
简单又好用得高效工具分享
|
消息中间件 设计模式 存储
聊聊如何才能高效学习?
近些年诞生了许多新技术,比如最时髦的 AI(目前还在智障阶段),数学基础是初中就接触过的概率统计。万丈高楼从地起,不要被新工具或者中间件迷住双眼,一味地追新求快。基础知识是所有技术的基石,在未来很长的时间都不会变化,应该花费足够的时间巩固基础。
聊聊如何才能高效学习?