concept

The front-end scaffolding tool is used to quickly create a project infrastructure, providing project specifications and conventions.

Typical front-end scaffolding tools include Yeoman, Plop, etc. The Vue Cli and Create React App also include scaffolding. Yeoman is a general-purpose scaffolding tool, typically used to create an entire project at once.

Plop is a small scaffolding tool for quickly creating specific files in a project.

Every time there is a new requirement and a new set of pages needs to be added, there is some repetitive, tedious work of copying, pasting and modifying. The quick creation of specific template files through Plop can solve the above problems and improve the development efficiency.

Plop use cases

Install the Plop

npm i -D plop

Create and write a template file

Create the Plop-templates directory in the project root directory to save the template files.

  • Template files have the suffix.hbs and follow Handlerbars template engine syntax.

Take the React project as an example, create component files (Index), styles, data interaction and interface files (Reducer, API) for each page.

For example, the index. HBS file contains the following contents:

import React,{useEffect,useReducer} from 'react'
import {} from 'antd';
import reducer from './reducer';
import styles from './index.less'

function {{ properCase name }}() {
  const initState={
    listFilter: {},loading:{}
  }

  const [{},commit]=useReducer(reducer,initState)

  useEffect(() = >{}, [])return (
    <div className={styles['{{ name']}}} >
      {{ properCase name }}
    </div>)}export default {{ properCase name }}

Copy the code
  • The properCase translates the name to a big hump (following the component name naming convention).
  • The name here is later read from user input by Plop.

Create and write a Plop configuration file

Create the Plop configuration file — plopfile.js in the project root directory

Writing configuration files

// The plop configuration file must export a function that takes a plop object, which is used to create related tasks.
module.exports = plop= > {
// New indicates the task name. You can use plop task name to invoke related tasks.
  plop.setGenerator('new', {
    description: 'create a page'./ / description
    // Imperative interaction configuration
    prompts: [{type: 'input'.name: 'name'.message: 'page name'.default: 'default-page'],},// A series of actions that need to be performed after the command line interaction is complete
    actions: [{type: 'add'.// Adds a new file
        path: 'src/pages/{{name}}/index.jsx'.// Specify the output path of the file
        templateFile: './plop-templates/index.hbs'.// Specify a template file
      },
      {
        type: 'add'.path: 'src/pages/{{name}}/index.less'.templateFile: './plop-templates/styles.hbs'}, {type: 'add'.path: 'src/pages/{{name}}/api.js'.templateFile: './plop-templates/api.hbs'}, {type: 'add'.path: 'src/pages/{{name}}/reducer.js'.templateFile: './plop-templates/reducer.hbs',}]}); };Copy the code
  • This is the most common way to create a new file from a template file. See the official Plop documentation for more.

Set the related creation commands in the package.json script for subsequent invocation.

When NPM run new is executed, the new task is invoked by using plop.

{
  "scripts": {..."new": "plop new". }}Copy the code

use

Call NPM run new to run the new task previously defined in the plop configuration file, which creates the corresponding file based on user input and the user-defined template. Whenever there is a new requirement, such as a new page requirement for data view management, simply run the NPM run new command to quickly create the relevant base file, avoiding repetitive and inefficient copying, pasting, and modifying files.