What is Plop?

Plop is a file generator tool system which allows you to define a script file to generate all the boilerplate files for you. Similar in how Angular schematics works, you can define a set of actions who would generate all the pre-defined code for you either automatically or by answering to some CLI prompts.

First, you will need to define a plopfile.js who would contain a function who would receive a plop object with access to all the methods to generate the code.

  • First of all we will use the .setGenerator function using 'components' as the generator name, so if we want to trigger this generator we would use plop components.
  • Then, in the prompts array, we will define a array of InquirerQuestion we could later use the input values for these question as parameters in our templates.
  • Finally, actions, who accept a array of ActionConfig, these actions will act on the files we will create and adapt them according to our needs.

We will also need to add a new folder were we will store our template, I will call it plop-templates and add a new file components.hbs.

We will have the following structure:

Now if we jump into the console in within our folder where we have the plopfile file and type plop components we will be asked 'type the name for your components folder' which is the message we defined in the message key for th object of the prompts array. After answering it will generate a folder with the answer we provided, in my case was test-components.

After this we will have the following structure:

test-components folder

And if we open the generated test-components.js we will see that the {{name}} variable has been modified with the name we provided in the console:

When to Use Plop

Now that we saw a simple example of how it works we can start creating more complex templates to automate our task. For example, we will create a new generator to generate all our Redux boilerplate for us.

main.hbs

constants.hbs

actions.hbs

typeExport.hbs

ploplfile.js

Link to the repo



Source link

Write A Comment