背景

每次开发新的功能的时候，就需要新建文件，写着一些重复的结构代码，反复写着模板代码令人头疼，而且写重复的代码也是很浪费时间的接下来介绍一款用命令行就可以自动生成代码的工具，不局限于某种语言哟，任何语言的模块代码都可以使用plop工具来初始化模块或者项目。
1.在项目中安装plop，作为开发模式下的辅助工具

npm install --save-dev plop

2.全局安装，这样就可以用plop命令了；

npm install -g plop

mac 使用

sudo npm install -g plop

3.在项目的根目录创建plop.js文件，写入一下代码；

module.exports = function (plop) {
 
    plop.setGenerator('component', {
        description: '视图组件',
        prompts: [{
            type: 'input',
            name: 'name',
            message: '组件的名字, 如MyApp',
            validate: function (value) {
                if ((/([A-Z][a-z]+)+/).test(value)) { return true; }
                return '组件名称必须为驼峰形式';
            }
        }],
        actions: [
            /**
             * TemplateComponent.js
             */
            {
                type: 'add',
                path: 'src/component/{{name}}/{{name}}.js',
                templateFile: 'templates/components/TemplateComponent.js'
            },
            {
                type: 'modify',
                path: 'src/component/{{name}}/{{name}}.js',
                pattern: /TemplateComponent/g,
                template: '{{name}}'
            },
            {
                type: 'modify',
                path: 'src/component/{{name}}/{{name}}.js',
                pattern: /template-component/g,
                template: '{{dashCase name}}'
            },
            /**
             * template-component.scss and css
             */
            {
                type: 'add',
                path: 'src/component/{{name}}/{{dashCase name}}.css',
                templateFile: 'templates/components/template-component.css'
            },{
                type: 'modify',
                path: 'src/component/{{name}}/{{dashCase name}}.css',
                pattern: /TemplateComponent/g,
                template: '{{dashCase name}}'
            },
            {
                type: 'modify',
                path: 'src/component/{{name}}/{{dashCase name}}.css',
                pattern: /template-component/g,
                template: '{{dashCase name}}'
            },
        ]
    });
 
    plop.setGenerator('router', {
        description: '路由生成器',
        prompts: [{
            type: 'list',
            name: 'rootPath',
            message: '生成路由的目录',
            choices: [
                'Routes'
            ]
        }, {
            type: 'input',
            name: 'routerPath',
            message: '路由的名字, 全部小写，用下划线分词 如：orders'
        }],
        actions: function(data){
            console.log(data);
 
            return [{
                // 配置路由文件
                type: 'modify',
                path: 'src/{{rootPath}}/index.js',
                pattern: /\/\/ generator import/,
                template: "import {{pascalCase routerPath }} from './{{ routerPath }}';\n// generator import"
            }, {
                type: 'modify',
                path: 'src/{{rootPath}}/index.js',
                pattern: /{ \/\* generator router \*\/ }/,
                template: '<Route path="/{{ routerPath }}"       
                component={ {{pascalCase routerPath}} }        
                desc="TODO: 该路由描述" />\n      { /* generator router */ }'
            }, {
                // 配置路由内容
                type: 'add',
                path: 'src/{{rootPath}}/{{routerPath}}/index.js',
                templateFile: 'templates/router/index.js'
            }, {
                type: 'add',
                path: 'src/{{rootPath}}/{{routerPath}}/{{pascalCase routerPath}}List.js',
                templateFile: 'templates/router/list.js'
            }, {
                type: 'add',
                path: 'src/{{rootPath}}/{{routerPath}}/{{pascalCase routerPath}}Detail.js',
                templateFile: 'templates/router/detail.js'
            }];
        }
    });
};

4.在根目录新建templates文件，在templates文件下新建components和router文件
5.在components下新建template-component.css和Templatecomponent.js文件

template-component.css
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0); }
  to {
    opacity: 1;
    transform: none; } }
 
.TemplateComponent {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  display: flex;
  flex: 1; }
  .TemplateComponent *, .TemplateComponent :after, .TemplateComponent :before {
    box-sizing: border-box; }
  .TemplateComponent .fl {
    float: left; }
  .TemplateComponent .fr {
    float: right; }
  .TemplateComponent .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  .TemplateComponent .clearfix {
    display: inline-block; }
  .TemplateComponent * html .clearfix {
    height: 1%; }
  .TemplateComponent .clearfix {
    display: block; }
  .TemplateComponent ul li:hover {
    background: #f63;
    cursor: pointer; 
}

Templatecomponent.js
/**
 * Created by ${USER} on ${DATE}.
 * https://www.jetbrains.com/help/webstorm/file-template-variables.html 
 动画callback只支持1.x版本的TransitionGroup
 */
import React,{Component} from 'react';
import './template-component.css';
const styles = {
    container: {}
};
//import ReactDOM from 'react-dom';
//import {TweenMax} from "gsap";
//import PropTypes from 'prop-types';
 
class TemplateComponent extends React.Component {
    static defaultProps = {
        ...Component.defaultProps
    }
    static propTypes = {}
    constructor(props){
        super(props)
        this.state = {}
        this.dom=React.createRef()
        //React.createRef();current
        //事件绑定在es6中用于自定义事件props事件不适用
        //this.handleClick = this.handleClick.bind(this);
    }
    //组件将要装载
    //componentWillMount(){}
    //组件加载完毕
    componentDidMount(){
        //this.dom.root=ReactDOM.findDOMNode(this);
    }
    //组件将接收道具
    //componentWillReceiveProps(nextProps){}
    //shouldComponentUpdate(nextProps, nextState) {}
    //组件将更新
    //componentWillUpdate(nextProps, nextState){}
    //组件更新完毕
    //componentDidUpdate(nextProps, nextState){}
    //组件将要卸载
    //componentWillUnmount(){}
 
    /*动画*/
    //componentWillAppear(callback){}
    //componentDidAppear(){}
    //componentWillEnter(callback){}
    //componentDidEnter(){}
    //componentWillLeave(callback){}
    //componentDidLeave(){}
    render() {
        return (
            <div ref={this.dom}></div>
        );
    }
}
 
export default TemplateComponent;

组件的模板就是以上，还可以根据自身需要定制路由。
6.在terminal中输入plop，就会让你选择是要生成组件还是路由，可根据需要选择，键入enter，再输入组件名称，就可以在模板中设置好的路径中找到文件，是不是很方便呢？