快捷写react代码的方法-plop

每次写重复的代码是不是很浪费时间呢？接下来介绍一款用命令行就可以自动生成代码的工具。

plop的介绍 https://www.npmjs.com/package...

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，再输入组件名称，就可以在模板中设置好的路径中找到文件，是不是很方便呢？