【前端工程化】前端脚手架生成器 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