Plop

Uniapp editor HBuilder template creation is not very convenient, so the introduction of ploP tool optimization.

What is Plop?

Plop is a miniature automated scaffolding tool that creates templates for pages, components, and more into code directories to avoid duplicating code.

Install and use

It is generally not used on its own, but integrated into the project.

  1. The installation
$ yarn add plop -D
Copy the code
  1. Create the plopfile.js file in the project root directory, which is the entry file for the configuration
module.exports = (plop) = > {
	plop.setWelcomeMessage(Please select the template you want to create:);
	plop.setGenerator("page".require("./plop-tpls/component/prompt"));
};
Copy the code
  1. Create a plop-tPLS folder management template in the root directory for creation convenience
$ mkdir plop-tpls
$ mkdir component
# Interaction configuration
$ touch prompt.js
# template file
$ touch index.hbs  
Copy the code
  1. prompt.js

This file returns three configuration items

Property Type Description
description [String] Template Name Introduction
prompts Array Interactive questioning
actions Array The event

Prompts are mainly introduced into the Inquirer library, configuration can refer to [InquirerQuestion]

Action can be configured as follows. For other parameters, see [actionConfig].

Property Type Default Description
type String Interaction types (add/modify/adMany…)
data Object / Function {} Injectable template data that can be mixed with query data
templateFile Sting Template File Path 
// prompt.js const fs = require('fs') const path = require('path') function getFolder(cpath) { let components = [] const  files = fs.readdirSync(cpath) files.forEach(function (item) { let stat = fs.lstatSync(path.join(cpath, item)) if (stat.isDirectory() === true && item ! = 'components') { components.push(path.join(cpath, item)) components.push.apply(components, getFolder(path.join(cpath, Tip: [{type: 'tip ', name:' tip '))}}) Return Components} module.exports = {description: 'tip ', prompt: [{type:' tip ', name: 'isGlobal', message: 'Global component ', default: false,}, {type: 'list', name: 'path', message:' Please select component creation directory ', choices: getFolder('src/pages'), when: (answers) => !answers.isGlobal, }, { type: 'input', name: 'name', message: 'please enter the component name, validate: (v) = > (! V | | v.t rim = = ='? 'component name cannot be empty: true),},], the actions: (data) => { let path = '' if (data.isGlobal) { path = 'src/components/{{ dashCase name }}/ {{ dashCase name }}.vue' } else { path = `${data.path}/components/{{ properCase name }}.vue` } const actions = [ { type: 'add', path: path, templateFile: 'plop-tpls/component/index.hbs', }, ] return actions }, }Copy the code
  1. index.hbs

The properCase in the template is the big hump of the display rule of the change name command. The following are all the rules

  • 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

Variables used in folders are wrapped with {{}}

<template>
	<view >

	</view>
</template>

<script>
	export default {
        name: "{{ properCase name }}"
		props: {},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>

</style>

Copy the code

The actual use

  1. Select a template

  1. Interactive selection

  1. Generate template

Reference documentation

  • The plop document
  • Build your own scaffolding /CLI knowledge system from 0 (10,000 words) šŸ›