directory

• Introduce the Plop
• Specific use of Plop
  • Specific steps
• conclusion

Introduce the Plop

A gadget that is primarily used to create specific file types in a project, similar to the Sub Generator in Yeoman, and is not typically used in isolation. Plop is typically integrated into projects to automate the creation of project files of the same type.

• plop-npm
• plop-github

Specific use of Plop

Specific steps

1. Create a directory and initialize itnpm init -yTo installPlop

npm install -g plop
Copy the code

2. Create it in a directoryplop-templatesFolder, which creates three template files

• component.css.hbs

.{{name}} {
  
}
Copy the code

• component.hbs

import React from 'react';

export default() = > (<div className="{{ name }}">
    <h1>{{name}} Component</h1>
  </div>
)
Copy the code

• component.test.hbs

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

it('renders widthout crashing'.() = > {
  const div = document.createElement('div');
  ReactDOM.render(<{{name}} />, div);
  ReactDOM.unmountComponentAtNode(div);
});
Copy the code

3. Create one in the root directoryplopfile.jsThis file isPlopTo export a function that receives aplopObject for creating generator tasks.

• plop.setGenerator: Sets a generator, the first argument being the project name and the second function being the object, corresponding to the Settings option
• Configuration items:
  • descriptionDescription:
  • prompts: values are arrays, command line interaction problems, one problem for one object
  • actionsThe: values are arrays of actions that are completed after the command line interaction, one action per object

module.exports = plop= > {
  // Set a generator, the first parameter is the project name, the second function is the object, corresponding to the Settings option
  plop.setGenerator('compontent', {
    / / description
    description: 'create a component'.// Command line interaction problems
    prompts: [
        // One problem corresponds to one object. For configuration, refer to the custom Generator
      {
        type: 'input'.name: 'name'.message: 'component name'.default: 'MyComponent'}].// Complete some actions after the command line interaction
    actions: [
      // Each object is an action
      {
        type: 'add'.// adds the file
        // Where is the output path of the added file? The double curly braces interpolation can get the data generated by the interaction
        path: 'src/components/{{name}}/{{name}}.js'.// What is the template file
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add'.path: 'src/components/{{name}}/{{name}}.css'.templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add'.path: 'src/components/{{name}}/{{name}}.test.js'.templateFile: 'plop-templates/component.test.hbs'})}}]Copy the code

4. inpackage.jsonadd

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

5. run

npm run plop
Enter the module name
? component name Header
+ + \ SRC \ #) components, the Header, the Header. The js
+ + \ SRC \ #) components, the Header, the Header. The CSS
+ + \ SRC \ #) components, the Header, the Header. Test. Js
Copy the code

Now you have three files under SRC \ Components in the root directory

• Header.js

import React from 'react';

export default() = > (<div className="Header">
    <h1>Header Component</h1>
  </div>
)
Copy the code

• Header.css

.Header{}Copy the code

• Header.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';

it('renders widthout crashing'.() = > {
  const div = document.createElement('div');
  ReactDOM.render(<Header />, div);
  ReactDOM.unmountComponentAtNode(div);
});
Copy the code

This allows you to generate a component directory from the template with one click.

conclusion

1. willplopModules are installed as project development dependencies
2. Write templates to generate files of a particular type
3. Create one in the project root directoryplopfile.jsfile
4. inplopfile.jsScaffolding tasks are defined in the file
5. throughPlopTo provide theCLIRunning scaffolding tasks