基于plop生成前端工程

基于plop自定义前端vue脚手架，plop是生成脚手架的框架。

plop-vue-cli演示.gif

案例npm地址

https://www.npmjs.com/package/plop-vue-cli

一、安装依赖

安装plop脚手架生成框架

npm i plop --save

安装download-git-repo，能从git等下载代码的工具，用于下载模版。

npm i download-git-repo --save

二、上代码

1、plop 配置（plopfile.js）

plopfile.js文件作为低层节点模块开始其生命周期，该模块输出一个接受该plop对象作为其第一个参数的函数。

module.exports=function(plop){// 自定义动作类型plop.setActionType('getTemplate',function(answers,config,plop){// 具体实现-省略...console.log("下载模版中...");returntrue;});// 注册plop.setGenerator('CreateVue',{// 描述description:'Create my vue project.',// 交互：提问-回答prompts:[{type:'input',// 输入值类型：Stringname:'projectName',// 获取输入值的keymessage:'Please input your project name.'// 问题描述}],// 执行操作。actions:function(){// 项目路径varbasePath=process.cwd()+'\\\\{{projectName}}\\\\'return[{// 自定义操作type:'getTemplate',// 执行自定义getTemplate类型 动作speed:'slow'// 执行操作为异步时，添加该字段值},{// 新增文件操作type:'add',// 操作类型,(add：新增文件，addMany：新增多个文件，modify：修改文件，append：追加)path:"./src/test.js",// 目标文件路径templateFile:"./temp/test.hbs",// 模版文件路径force:true,// 是否强制执行该动作，（当目标文件已存在时，true则会覆盖该文件， false则不新增 跳过）verbose:true//  打印每个操作成功的文件路径}]}});};

plop对象公开包含setGenerator(name, config)函数的plop api对象。这是用来（等待）为该plopfile创建生成器的函数。当plop从该目录（或任何子目录）在终端上运行时，将会显示prompts这些交互列表，最终执行actions操作列表。

主要方法和参数看plop的官方文档吧

2、下载模版代码（plopfile.js）

模版文件代码也可以放在工程里面，但是建议还是git等平台上，便于后期维护，不至于修改一下模版就发布一次脚手架。

所有这里用到的是download-git-repo工具来从git下载模版代码。

/**

* 异步获取模版

* @param {*} path

* @param {*} callback

*/functiongetTemplate(path,callback){// clone git代码模版，不加分支时，默认master。download('direct:https://github.com/JumplyCode/plop-vue-cli-template.git',path,{clone:true},callback);}

3、如何编写模版

如何通过交互获取的值，进行编写模版。编写模版 plop采用的是handlebars.js模版引擎来操作，通过预编译.hbs文件来构建Web模板。

使用方法是加两个花括号{{value}}, handlebars模板会根据当前上下文自动匹配相应的数值、对象甚至是函数。

constPUBLICPATH='web-{{projectName}}';// 上下文

假如交互时，projectName我输入的值是test，则编译后的模版就变成：

constPUBLICPATH='web-test';// 上下文

模版生成之后就会根据actions中的类型（type），或者新增或者修改文件等等。

plop 配置（plopfile.js）【完整】

vardownload=require('download-git-repo');varrm=require('rimraf').sync;constnodeFs=require('fs');constcfg=require("./config");/**

* 异步获取模版

* @param {*} path

* @param {*} callback

*/functiongetTemplate(path,callback){// clone git代码模版，不加分支时，默认master。download('direct:https://github.com/JumplyCode/plop-vue-cli-template.git',path,{clone:true},callback);}/**

* 删除文件

* @param {String} filePath 文件路径

*/functiondeleteFile(filePath){try{rm(filePath);returntrue;// callback(null, `删除 ${filePath} 成功`)}catch(e){returnfalse;}}/**

* 交互：询问-输入

* 1、请输入项目名称（projectName  【String】）

* 2、是否需要vuex缓存数据（isStore  【Boolean】）

* 3、是否需要用户信息（isUser  【Boolean】）

* 4、是否需要代理信息

*//**

* 执行动作

* 1、下载模版 并创建项目

* 2、根据填写内容，配置package.json

* 3、配置vue.config.js

* 4、配置src/main.js

* 6、清除.hbs文件

*/module.exports=function(plop){// 自定义动作类型-下载模版plop.setActionType('getTemplate',function(answers,config,plop){// do something// getTemplate();console.log("下载模版中...");varpath=process.cwd()+"\\"+answers.projectName||"vueDemo";returnnewPromise((resolve,reject)=>{getTemplate(path,function(error,data){if(error){reject('模版下载失败：'+error);}else{resolve('下载模版完成.');}});});});// 自定义动作类型-删除hbs文件plop.setActionType('deleteHbs',function(answers,config,plop){varbasePath=process.cwd()+"\\"+answers.projectName||"vueDemo";varisStore=answers.isStore;// var isUser = answers.isUser;returnnewPromise((resolve,reject)=>{try{vartemplates=cfg.templates;// 删除hbs文件for(varkeyintemplates){varfilePath=basePath+"/"+templates[key];deleteFile(filePath);}// 如果不需要vuex，则删除store文件if(!isStore){varstorePath=basePath+"/src/store"deleteFile(storePath);}//删除 package-lock.json 缓存文件deleteFile(basePath+"/package-lock.json");resolve('完成.');}catch(e){reject('hbs模版删除：'+error);}});});// controller generator// 注册plopplop.setGenerator('CreateSmyVue',{// 描述description:'Create smy vue project.',// 交互prompts:[{type:'input',// 输入值类型：Stringname:'projectName',// 获取输入值的keymessage:'Please input your project name.',// 问题描述description:'输入项目名',validate:function(input){// Declare function as asynchronous, and save the done callbackvardone=this.async();if(input){if(nodeFs.existsSync(process.cwd()+'/'+input)){done("项目名已存在")}done(null,true)}else{done("请输入项目名")}}},{type:'input',// 输入值类型：Stringname:'projectName_ch',// 获取输入值的keymessage:'Please input your project name for Chinese.',// 问题描述default:"项目名称",description:'输入项目的中文名',},{type:'confirm',// 输入值类型：Booleanname:'isStore',// 获取输入值的keymessage:'Do you need a vuex?',default:true,description:'是否需要vuex（缓存）',},{type:'input',// 输入值类型：Booleanname:'proxy',message:'Please enter your api proxy address.',default:"https://www.baidu.com",description:'输入后端接口代理地址',}],// 执行操作actions:function(){// 项目路径varbasePath=process.cwd()+'\\\\{{projectName}}\\\\'return[{type:'getTemplate',// 执行自定义的类型动作speed:'slow'},{type:'add',// 操作类型：新增文件path:basePath+cfg.files.packageJson,// 目标文件templateFile:basePath+cfg.templates.packageJson,// 源文件（模版文件）force:true,// 是否强制执行该动作，（当目标文件已存在时，true则会覆盖该文件， false则不新增 跳过）verbose:true// 打印每个成功添加的文件路径},{type:'add',path:basePath+cfg.files.vuConfigJs,templateFile:basePath+cfg.templates.vuConfigJs,force:true,verbose:true},{type:'add',path:basePath+cfg.files.mainJs,templateFile:basePath+cfg.templates.mainJs,force:true,verbose:true},{type:'deleteHbs',speed:'slow'}]}});};

这时候基本完成通过命令行交互生成自己的工程了，只要在plopfile.js配置文件的目录下，执行plop命令，就可以开始生成之路了。

but，但是我想像vue-cli一样，全局安装vue-cli之后，不管在哪执行“vue create hello-world”命令都可以生成vue工程。

三、自定义脚手架成神之路

1、配置package.json

配置package.json，为发布npm做准备。

{"name":"plop-vue-cli","version":"0.0.1","main":"plopfile.js","license":"MIT","keywords":["plop-vue-cli","cli","vue","plop"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","plop":"plop",},"author":"作者","description":"npm描述","bin":{"create-plop-vue":"bin/index.js"},"dependencies":{"download-git-repo":"^3.0.2","plop":"^2.7.4"}}

主要字段

name：上传npm后的名称

bin：定义命令行命令，执行该命令行时会执行到对应的脚本文件。命令执行：create-plop-vue，则会执行bin/index.js文件。

2、配置bin/index.js，使其启动plop

#!/usr/bin/env nodeconstargs=process.argv.slice(2);const{Plop,run}=require('plop');constargv=require('minimist')(args);constpath=require('path');Plop.launch({cwd:argv.cwd,configPath:path.resolve(__dirname,"../plopfile.js"),// 当前依赖包文件路径下的plopfile.js文件require:argv.require,completion:argv.completion},run);

npm发布

1、登录npm

npm login

2、发布代码（更新）

npm publish

作者：有点皮的小黄皮

链接：https://www.jianshu.com/p/e5e115805d85

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。