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

为什么要使用 Generator

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

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

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

plop介绍

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

安装

本地安装

npm install --save-dev plop
复制代码

或者全局安装

npm install -g plop
复制代码

在项目根目录下创建一个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
};
复制代码

常用方法

方法	参数	返回值	描述
setGenerator	String, GeneratorConfig	GeneratorConfig	创建一个 generator
setHelper	String, Function		创建 handlebars helper
setPartial	String, String		setup a handlebars partial
setActionType	String, CustomAction		注册一个自定义的 action 类型
setPrompt	String, InquirerPrompt		使用 inquirer 注册一个自定义的 prompt 类型
load	Array[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上