前端日常开发中,会遇见各种各样的cli,使用vue技术栈的你一定用过<代码> @vue/cli> create-react-app>
cli工具的作用在于它能够将我们开发过程中经常需要重复做的事情利用一行代码来解决,比如我们在写需求的时候每新增一个页面就需要相应的增加该页面的初始化代码,而相同文件类型的初始化代码往往是一样的,比如例子。vue。同时我们还需要增加对应的路由,比如在路由器。js中增加对应的路由规则。这些工作都是很繁琐又重复的,每次遇到这种情况都重复一遍吗?是时候作出改变了,编写自己的cli工具,一行命令,3秒钟进入编码状态!
本文以自己的fc-vue-cli为例,将开发到发布过程完整记录下来,看完本文,你将学会如何从零开发一个cli项目,以及如何使用npm发布自己的包。
源代码地址:源代码
npm地址:npm
原文地址(github上):
github
要实现的功能
fc-vue add page
通过这行命令来新增一个页面的模版文件,省去了手动新建文件,手动复制初始化代码的麻烦,同时添加上对应的路由配置
脚手架的名字定为fc-vue,这个是通过包。json里面的名字字段来定义的。
# !/usr/bin/env节点//使用严格的;
const粉笔=要求(“粉笔”);
const currentNodeVersion=process.versions.node;
const主要=currentNodeVersion.split (' . ') [0];
如果(主要& lt;10){
console.error (
chalk.red (
你正在运行节点\ n $ {currentNodeVersion} \ nvue-assist-cli需要节点10或更高。\ nPlease更新你的版本的节点
)
);
process.exit (1);
}
要求(. ./包/init);
在这里初始化你要实现的命令,比如我要实现add page功能,这里要用到的<代码> 库指挥官。
const{程序}=要求(“指挥官”);
const{日志}=要求('/lib/util。');//初始化版本,我们直接获取package.json里面的版本号就可以了
program.version(要求(“. ./package.json”) .version);//开始添加命令[名字]说明这个参数是可选的,我们想做到兼容不同的使用方法所以把这个参数设置未可?/.description里面可以写上这个命名的一些描述,当用户fc-vue帮助add page的时候可以提供帮助文档//．选择用来添加可选的参数//.action用来响应用户的输入,这里我们单独用一个文件。/命令/add page来处理
程序
.command (' add page[名字]”)
.description (
“添加一个页面,默认加在。/src/或看法。/src/或页面。/src/页目录下,同时添加路由\ n支持“/崩创唇ㄗ幽柯祭?add page用户/登录\ n使用时,支持fc-vue add page【回车】来选择输入信息的
)
.option (' s,简单”、“创建简单版的页面,只新增一个.vue文件的)
.option (“- t,标题& lt; title>”、“页面标题”)
.action(要求(“。/命令/add page”))
内(“——帮助”,()=比;{
日志(“支持fc-vue add page【回车】来选择输入信息的);
});//格式化命令行参数
program.parse (process.argv);
这里需要使用到几个库,<代码> shelljs> 用来给打印输出增加样式。函数通过名字,cmdObj来获取用户的输入,其中名字是.command (“add page[名字]”)里面的名字,cmdObj对象里面则包括其他参数
const fs=要求(fs);
const shell=要求(“shelljs”);
const粉笔=要求(“粉笔”);
const {askquestion askCss}=要求(“. ./lib/ask-page”);
const checkContext=要求(“. ./lib/checkContext”);
const copyTemplate=要求(“. ./lib/copy-template”);
const addRouter=要求(“. ./lib/add-router”);
const{错误、日志、成功}=要求(. ./lib/util);
shell.config。致命的=true;
模块。出口=异步(名称、cmdObj)=比;{
尝试{//默认使用的少,
让cssType=吧佟?
让简单=cmdObj.simple;
让标题=cmdObj.title;
如果(!的名字,,(简单| |标题)){
错误(“错误的命令,缺少页面名称”);
process.exit (1);
}//如果用户没有输入的名字,[fc-vue add page)则进入问答模式,通过一问一答获取用户的输入
如果名字(!){
const答案=等待askquestion ();//console.log(答案);=answers.FILENAME名称;
标题=answers.TITLE;
简单=answers.SIMPLE;
如果(简单){
const res=等待askCss ();
cssType=res.CSS_TYPE;
}
}//其他情况则可以通过选择拿到参数//console.log (process.cwd ());//检查上下文环境,并返回目标文件目录路径
让{destDir、destDirRootName rootDir}=checkContext (
的名字,
cmdObj,
“页面”
);//复制模版到目标文件
让{destFile}=copyTemplate (destDir、简单、cssType);
如果(fs.existsSync (destFile)) {
等待addRouter(名称、rootDir简单、destDirRootName标题);
日志(“成功创建$ {name},请在$ {destDir}下查看”);
其他}{
console.error (
chalk.red(“创建失败,请到项目【根目录】或者【@src】目录下执行该操作的)
);
}
}捕捉(错误){
console.error (chalk.red(错误));
console.error (
chalk.red (
“创建页面失败,请确保在项目【根目录】或者【@src】目录下执行该操作\ n,否则请联系@zhongyi”
)
);
}
