Plop is a handy little automated build tool

This is the 4th day of my participation in the August More Text Challenge

-> Go to my blog post

Introduce the plop

Plop is a small generator for generating customized files according to instructions. For example, in the React project, we often write new components, and each component has some repetitive code, such as component style files, routing, dependency common libraries, and so on. Using PLOP instead of manual generation can effectively improve development efficiency and reduce error cost.

How to use

Step1 install global dependencies

yarn global add plop
Copy the code

Step2 write the plop configuration file

Name the configuration file plopfile.js and write it to your project.

The sample

module.exports = (plop) = > {
    plop.setGenerator("page", {
        description: "create a page".prompts: [
            // Command line interaction
            {
                type: "input".name: "module".message: "module name".default: "MyModule"}, {type: "input".name: "name".message: "page name".default: "MyPage"],},actions: [{type: "add".// add means to add a file
                path: "src/pages/{{module}}/{{name}}.tsx".// Name is the name in the command line interaction
                templateFile: "plop-templates/react-page.hbs"}, {type: "append".// append stands for append code
                path: "src/pages/{{module}}/router.ts".template: "import {{name}} from './{{name}}';".pattern: /\/\/ \[PLOP_NEW_IMPORTS\]/g.// The position to which the added code matches},]}); };Copy the code

Step3 configure the template file

Plop is primarily driven by handlebars, and arguments from the command line are automatically bound to the template as follows:

import { FC } from 'react';
import {{name}}Container from 'Containers/Nps/{{name}}'; const{{name}}: FC<{}> = () => { return <{{name}}Container />; }; export default{{name}};

Copy the code

Step4 enter information as prompted on the cli

The related components are generated and the routing is configured, as shown in the following figure:

other

As shown in the figure above, there is no problem in the execution of the appended line of code, but it is only appended after the statement matching pattern. If we execute the command many times, the new introduction code is always in front of the old introduction code, which is not intelligent enough, and people with obsessive-compulsive disorder will be very uncomfortable. In this case, plopfile can be changed to:

// plopfile.js
actions: [
    // Append to the routes file
    {
        type: "modify".path: "src/pages/{{module}}/router.ts".pattern: /\/\/ \[PLOP_NEW_IMPORTS\]/g,
        template:
            "const {{name}} = React.lazy(() => import('./{{name}}')); \n// $1".transform: (fileContents) = >
            fileContents.replace(/\$1/g."[PLOP_NEW_IMPORTS]"),},];Copy the code

As follows, new code appended to the pattern will be inserted before the pattern, that is, new code will always be appended to the old code.

const Test = React.lazy(() = > import("./Test"));
const Test2 = React.lazy(() = > import("./Test2"));
// [PLOP_NEW_IMPORTS]
Copy the code

The modify type is to change the string matching pattern to template. In addition, modify provides a set of variables to refer to strings that pattern matches, such as $1 and $2, as shown in the template example :”const {{name}} = react.lazy (() => import(‘./{{name}}’)); \n/ $1″; $1 refers to the string pattern matching // [PLOP_NEW_IMPORTS].

Also, the transform method in Modify allows you to modify the file again before it is written to disk. As in the example above, take the $1 variable, replace it with the [PLOP_NEW_IMPORTS] placeholder, and the next plop command will insert forward again.

Helpers

The helper can do some processing for the input parameters. For example, when we enter the component name, there may be some exceptions. For example, the target component is called CommentsList, and it is difficult to switch case, we can use the built-in Helper: PascalCase to process the input argument, convert it to CommentsList by typing: CommentsList on the command line, as shown in the following example:

      {
        type: 'modify'.path: 'src/pages/{{module}}/router.ts'.pattern: /\/\/ \[PLOP_NEW_IMPORTS\]/g,
        template:
          "const {{pascalCase name}} = React.lazy(() => import('./{{pascalCase name}}')); \n// $1".transform: (fileContents) = >
          fileContents.replace(/\$1/g.'[PLOP_NEW_IMPORTS]'),}Copy the code

See more built-in Helpers

You can also customize the helper:

plop.setHelper("upperCase".function (text) {
    return text.toUpperCase();
});
Copy the code

The related documents

Front-end engineering – Yeoman and Plop
Plop official documentation
Official inquirer document