plop的用法

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

这篇关于plop的用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---