前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >plop js 模板工具

plop js 模板工具

作者头像
copy_left
发布2019-12-12 21:34:56
5.2K0
发布2019-12-12 21:34:56
举报
文章被收录于专栏:方球方球方球
## plop 模板工具
概述

plop 模板生成cli

安装
// 全局安装
npm i -g plop

// 本地安装
npm i --save-dev plop
配置文件
// 更目录创建文件 plopfile.js  plop将已该文件作为执行入口

// 导出执行函数
module.exports = function(plop){

    plop.getGenerator("模板名称", {

        description: "操作描述",
        prompts: [], // 交互提示
        actions: [] // 执行操作
    })

}
基础使用
  • 注册
// plopfile.js

module.exports = function(plop){

   plop.getGenerator("vue基础模板", {
       description: '创建vue文件',
       prompts: [
           {
               type: 'input',  // 交互类型
               name: 'name',   // 参数名称
               message:'请输入文件名称' // 交互提示
           },
           {
               type: 'input',
               name: 'path',
               message: '请输入文件创建目录'
           }
       ],
       actions: [
           {
               type: 'add', // 动作类型
               path: '{{ path }}/{{ name }}.vue', // '{{  }}' 双大括号内设置动态参数
               templateFile: 'plop-templates/views/vue.hbs' // 模板文件地址, 使用hbs文件
           }
       ]

   })
}

// plop-templates/views/vue.hbs

<template>
    <div class='cmp-{{ name }}' >
    </div>
</template>
<script>
export default {
    name: '{{ name }}'
}
</script>
<style>
</style>
  • 执行命令 plop ... 请输入文件名称 tmp 请输入文件名称 template/cmp
  • 执行结果 // root/template/cmp/tmp.vue <template> <div class='cmp-tmp' > </div> </template> <script> export default { name: 'tmp' } </script> <style> </style>
plop 命令参数
// 执行指定配置
plop 配置名称

// 执行指定配置并设置参数
plop 配置名称 输入参数

// 执行 plopfile 文件
--plopfile 文件路径

// 设置工作路径
--cwd

// 帮助
-h, --help

// 全局初始化
-i, --init

// 显示版本
-v, --version
generator 生成器 API

生成器, 用来生成执行文件模板或向文件中加入模板信息

  • description 描述生成器行为
  • prompts 提示配置 详情
    • type 交互类型 input number checkbox ...
    • name 参数使用存储的属性名
    • message 提示信息
    • default 参数默认值
    • ....
  • actions 执行配置 详情
    • type 预设类型 add modify addMany etc
    • force
    • data 返回给模板的数据
    • abortOnFail 当有action 执行失败时, 是否终止其他 action
默认 action API
  • addA 创建文件
    • path 文件生成目录
    • template 模板字符串, 使用字符串模板生成文件内容 { template: '<h1>{{ title }} <h1>' }
  • templateFile 模板文件地址, 使用模板文件生成文件
  • skipIfExists 如果文件已存在,将跳过
  • force
  • data 模板参数
  • abortOnFail 当有action 执行失败时, 是否终止其他 action
  • addMany 创建多个文件
    • destination
    • base 替换的基础目录 { destination:'target', base: 'root/sub', templateFiles: 'root/sub/*.hbs' } // 生成的文件目录: target/file.hbs
  • templateFiles 模板文件匹配规则 参考 { templateFiles: 'plop-templates/view/*.hbs' }
  • globOptions 更改匹配方式
  • stripExtensions
  • verbose 是否打印所有文件目录
  • skipIfExists
  • force
  • data
  • abortOnFail
  • modify 修改
    • path
    • pattern 替换规则 正则
    • template
    • templateFile
    • data
    • abortOnFail
  • append 添加
    • path
    • pattern 插入规则 正则
    • unique
    • separator
    • template
    • templateFile
    • data
    • abortOnFail
模块分组

我们可将多个 配置分配到多个文件中单独管理

//  module/view/prompt.js 页面模板
const conf = {
    description: "view template",
    prompts: [
        {
            type: 'input',
            name: 'name',
            message: 'file name',
        }
    ],
    actions: data => {

        const name = '{{name}}'
        return [
            {
                type: 'add',
                path: `template/${name}.vue`,
                templateFile: 'plop-templates/view/index.hbs',
            }
        ]

    }
}

module.exports = function (plop){
    plop.setGenerator('view', conf)
}

//  module/components/prompt.js 组件模板
const conf = {
    description: "cmp template",
    prompts: [
        {
            type: 'input',
            name: 'name',
            message: 'file name',
        }
    ],
    actions: data => {

        const name = '{{name}}'
        return [
            {
                type: 'add',
                path: `template/${name}.vue`,
                templateFile: 'plop-templates/cmp/index.hbs',
            }
        ]

    }
}

module.exports = function (plop){
    plop.setGenerator('view', conf)
}

// root/plopfile.js 
const viewCallback = require('./plop-templates/view/prompt')
const cmpCallback = require('./plop-templates/cmp/prompt')

module.exports = function(plop){
    cmpCallback(plop)
    viewCallback(plop)
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 安装
  • 配置文件
  • 基础使用
  • plop 命令参数
  • generator 生成器 API
  • 默认 action API
  • 模块分组
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档