likes
comments
collection

【前端工程化】前端脚手架生成器 plop

作者站长头像
站长
· 阅读数 29

为什么要使用 Generator

当你想要从你的代码独立创建你的模版文件时,你往往会付出很多不必要的时间和精力。

Generator平均可以帮你的团队从创建每一个route, component, controller, helper, test, view等等文件时省下5-15分钟。

因为上下文切换是昂贵的,而且节省时间远不是自动化工作流的唯一优点。

plop介绍

plop是一个帮助前端构建脚手架的神器。用户可以预设配置文件,通过终端命令,快速的搭建一套文件模板。可以用于生成routes, controllers, components, helpers等文件。

安装

  1. 本地安装
npm install --save-dev plop
  1. 或者全局安装
npm install -g plop
  1. 在项目根目录下创建一个plopfile.js文件
export default function (plop) {
    // create your generators here 
    plop.setGenerator('basics', { 
        description: 'this is a skeleton plopfile', prompts: [], // array of inquirer prompts 
        actions: [] // array of actions 
    });
};

简单使用

plopfile文件的格式是一个export导出函数,函数入参为plop。在plopfile.js文件中写入如下内容

export default function (plop) {
    // controller generator
    plop.setGenerator('controller', {
        description: 'application controller logic',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'controller name please'
        }],
        actions: [{
            type: 'add',
            path: 'src/{{name}}.js',
            templateFile: 'plop-templates/controller.hbs'
        }]
    });
};

执行文件将在控制台抛出一个问题,并且创建一个js文件。我们可以对上面的文件进行扩展,也可以使用如下配置项。

使用配置项 Prompts

Plop 使用 Inquirer 这个库来捕获用户输入,你可以在 inquirer 官网上找到所有的 prompts 类型

cli用法

首先配置script命令 方便用命令行启动plop

// package.json
{
    ...,
    "scripts": {
        "plop": "plop"
    },
    ...
}

Plopfile Api

Typescript 支持

// plopfile.ts
import {NodePlopAPI} from 'plop';

export default function (plop: NodePlopAPI) {
  // plop generator code
};

常用方法

方法参数返回值描述 
setGeneratorString, GeneratorConfigGeneratorConfig创建一个 generator 
setHelperString, Function 创建 handlebars helper 
setPartialString, String setup a handlebars partial 
setActionTypeString, CustomAction 注册一个自定义的 action 类型 
setPromptString, InquirerPrompt 使用 inquirer 注册一个自定义的 prompt 类型 
loadArray[String], Object, Object 从其他的plopfile或npm模块加载 generators, helpers 或 partials

Plopfile api的详细用法可见 plop官网

使用Actions构建文件

plopfile的actions选项内置了多种类型的api,包括新增文件,新增文件夹,重命名文件等操作。

actions api的用法详见官网示例built-in-actions

内置helpers

plop 已经内置了一些实用的 helper。 他们大多数是大小写转换工具, 这里完整地列出了所有的helper

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

其他 helper

  • pkg: 从 plopfile 同级文件夹下的 package.json 文件中查找一个属性。

使用示例

我们封装了一个基于vue3.x的view,component和store模板文件生成器,地址是我的github上