每次写重复的代码是不是很浪费时间呢？接下来介绍一款用命令行就可以自动生成代码的工具。
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，再输入组件名称，就可以在模板中设置好的路径中找到文件，是不是很方便呢？
