前端工程化之plop的使用
plop是什么？plop是一个轻量级的项目构建工具，api相当简单好用
明确需求
为什么需要plop？理论上讲，plop能做到的东西不算少，但主要也就是模板文件这样。对我来说，用来生成一些模块文件就行
安装plop
使用全局安装，不要局部，局部安装就是毒瘤。
npm install -g plop
在当前项目根目录新建文件plopfile.js
不需要专门新建一个项目，plop是非常轻量级的工具，api实打实简单，我们甚至不太需要接触到cli
const reducerGenerator = require('./plop-templates/reduce/prompt.js')
module.exports=function (plop) {
plop.setGenerator('reducer', reducerGenerator);
};
这里的reducer要记住，之后用得上
写好对应reducerGenerator的模板文件
这样的话接下来这个hbs文件就是这样
let initialState = {}
const {{name}}Reducer = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
}
export default {{name}}Reducer
调用模板并生成文件的代码
在我日常开发的过程中，一般把reducer放在这里：
image.png
也就是src/reducers/{{name}}Reducer.js,其中的name对应某个reducer的名称。
那么我们的代码如下：
module.exports = {
description: '生成redux中的reducer模板', //描述这个generate的作用
prompts: [{
type: 'input',
name: 'name',
message: 'reducer名', // 在命令行中的问题
}],
actions: function(data){
data.name=data.name.replace(data.name[0],data.name[0].toLowerCase());
const actions = [{
type:'add',
path:'src/reducers/{{name}}Reducer.js',
templateFile:"plop-templates/reduce/index.hbs",
data:{
name:data.name
}
}]
return actions;
}
};
通过plop，我们可以强制规范，比如说我们的reducer文件名首字母一定是小写。
这样一来，我们的基本目录结构是这样的
image.png
调用
我们前边使用全局安装，这里就可以直接plop，还记不记得前边提到让你记住的这个参数reducer？这里要用到
plop reducer
然后安装逻辑弹出了名字询问，输入后我们发现生成完毕
image.png
image.png
plop可以说是非常好用了；接下来尝试一下husky
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-10-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录