plop的用法

每次寫重複的代碼是不是很浪費時間呢？接下來介紹一款用命令行就可以自動生成代碼的工具。

plop的介紹 https://www.npmjs.com/package/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，再輸入組件名稱，就可以在模板中設置好的路徑中找到文件，是不是很方便呢？