“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

In addition to Yeoman’s large scaffold base, there are other small scaffold bases that are also easy to use, so here’s a Plop for amway

Plop

A small and beautiful scaffolding tool

Plop is actually a small tool that is primarily used to create specific types of projects in a project. We don’t use it on its own, we integrate it into a project

Basic use of Plop

Let’s do some ploP demos in the React Infrastructure project

  1. We need to integratePlopInstall our development dependencies in
npm add plop --dev or yarn add plop --dev
Copy the code
  1. Once installed, we need to create a new one in the project root directoryplopfile.jsThe file
    • plopfile.jsisPlopImport file, need to export a function
    • This function accepts oneplopObject for creating generator tasks
    • plopThere aresetGeneratorMethod, which takes two arguments (generator name, generator options)
    • Code sample
    // 'plopfile.js' is a' Plop 'entry file that needs to export a function
// This function takes a 'plop' object that is used to create a generator task
module.exports = plop= > {
  plop.setGenerator('components', { 
    description: 'Create a component'.prompts: [{
      type: 'input'.name: 'name'.// The hints given
      message: 'Component Name'.// The default answer
      default: 'Mycomponent'}].// Command function interaction after the execution of the operation
    actions: [{
      type: 'add'.// adds the file
      path: 'src/components/{{name}}/{{name}}.js'.// Add template con
      templateFile: ' '})}}]Copy the code
    • Of course,templateFileIs also required to fill in, we create in the root directoryplop-templates\component.hbsfile
    import React from "react"
 export default() = > (<div className="{{name}}">
     <h1>{{name}} Component</h1>
   </div>
 )
Copy the code
    • fortemplateFileFor the assignment
    .templateFile: 'plop-templates/component.hbs'.Copy the code

With everything in place, we can return to the command line after completing the PLOP task definition

 yarn plop components
Copy the code

Note that components is the name of our corresponding defined component

After the press enter, we see the prompt we defined appear:

Enter the file we want to define:

Ohhhhhhhhh! Creating success is what we need

Add multiple templates for the generator

In our project, components cannot be of one type. React is made up of multiple files, so we created several corresponding templates

  • component.hbs

It’s already there, so I’m not going to copy it

  • component.css.hbs

    . {{name}} {

}
Copy the code

  • component.test.hbs

    import React from "react"
import ReactDOM from "react-dom"
import {{name}} from './{{name}}';

it('renders without crashing'.() = > {
  const div =document.createElement('div')
  ReactDOM.render(<{{name}}/>, div, true)
  ReactDOM.unmountComponentAtNode(div)
})

Copy the code

    So once we have that we’re going to do some changes to the Actions side, add

    // Command function interaction after the execution of the operation
actions: [{...type: 'add'.// adds the file
  path: 'src/components/{{name}}/{{name}}.css'.// Add template con
  templateFile: 'plop-templates/component.css.hbs'
},
{
  type: 'add'.// adds the file
  path: 'src/components/{{name}}/{{name}}.test.js'.// Add template con
  templateFile: 'plop-templates/component.test.hbs'
}]
Copy the code

    Just run it again

Conclusion some

Using PLOP in our project requires the following steps

  • willplopModules as project development dependencies
  • Create one in the project root directoryplopfile.jsfile
  • plopfile.jsScaffolding tasks are defined in the file
  • Write templates to generate files of a particular type
  • throughPlopProvides CLI to run scaffolding tasks