首页 > 其他分享 >『手撕Vue-CLI』添加帮助和版本号

『手撕Vue-CLI』添加帮助和版本号

时间:2024-05-18 14:29:50浏览次数:23  
标签:process Vue CLI 版本号 argv -- program version

前言

经过上一篇『手撕Vue-CLI』编码规范检查之后,手撕 Vue-CLI 已经进阶到了代码规范检查这一步,已经将基本的工程搭建好了,然后代码规范约束也已经加入了,并且将 nue-cli 指令绑定到了全局当中,可以在任何地方使用了。

正文

接下来这篇文章呢,就要来实现一下大多数的命令行工具都会有的两个功能,一个是帮助,一个是版本号。

我相信这个功能大家都很熟悉,就是在命令行中输入 nue-cli -h 或者 nue-cli --help 就可以查看到帮助信息,输入 nue-cli -v 或者 nue-cli --version 就可以查看到版本号。

没错,这两个功能是大多数的命令行工具都会有的,所以我也要来实现一下。

实现帮助 --help

首先我们来实现帮助这个功能,对于我这种菜鸟来说,首先要面临的问题就是我该如何拿到用户在命令行中输入的参数。

在 Node.js 中发现可以通过 process.argv 来获取到用户在命令行中输入的参数,这个参数是一个数组,第一个是 Node.js 的路径,第二个是当前执行的文件路径。

我在 bin/index.js 中打印一下 process.argv

console.log(process.argv);

上面是我在没有输入任何参数的情况下执行 nue-cli 的输出结果,可以看到 process.argv 的前两个元素是 Node.js 的路径和当前执行的文件路径。

然后我在输入 nue-cli -h 的情况下执行 nue-cli,输出结果如下:

可以看到在输入 nue-cli -h 的情况下,process.argv 的第三个元素是 -h

这样就可以得出结论,用户在命令行中输入的参数是通过 process.argv 这个数组来获取的,然后我们就可以通过这个数组来判断用户输入的参数是什么了。

然后随着代码也就成为了如下代码块所示的这样子:

if (process.argv[2] === '--help') {
  // 输出帮助文档
} else if (process.argv[2] === '--version') {
  // 输出当前的版本号
}

commander

个人觉得这样写代码不太好,所以我这里要给大家介绍一个库 commander,这个库可以帮助我们更好的处理命令行参数。

npm 地址:https://www.npmjs.com/package/commander

根据官方的介绍,可以通过 commander 来更好的处理命令行参数,所以我就来安装一下这个库:

npm install commander

使用方式呢其实就是看官方文档介绍,这里我就直接给大家省略了,直接上代码,安装好了是不是要使用,所以要先引入:

const { program } = require('commander');

然后呢,我们就可以通过 program 来处理命令行参数了,那么通过 program 如何拿到用户输入的参数呢,官方文档中有一个 program.parse() 方法,这个方法可以解析用户输入的参数。

将 process.argv 传入 program.parse() 方法中,就可以解析用户输入的参数了。

program.parse(process.argv);

通过如上这行代码就已经实现了 --help 的功能了,为什么呢,因为 commander 会自动帮我们处理 --help 这个参数,所以我们不需要再去判断用户输入的参数是不是 --help 了。

加入了这行代码之后,我们再次输入 nue-cli --help,就可以看到如下的输出结果:

是不是非常的 so easy to happy,这样就实现了 --help 的功能了。

总结一下实现 --help 的过程,其实就一点,只需要将传递进来的参数直接传递给 program.parse() 方法就可以了,commander 会自动帮我们处理 --help 这个参数,也就实现了 --help 的功能。

实现版本号 --version

接下来来实现版本号这个功能,其实实现版本号这个功能和实现帮助这个功能是一样的,只需要将版本号传递给 program.version() 方法就可以了。

首先呢,我们要引入 commander,这一步已经在上面实现 --help 的时候引入了,所以这里就不需要再引入了。

然后呢,我们要调用 program.version() 方法,将版本号传递给这个方法就可以了。

program.version('1.0.0');

那么两个功能一起实现的话代码也就演变成了如下这样子:

const { program } = require('commander');

program.version('1.0.0');
program.parse(process.argv);

其实呢如上这种写法还可以改一下,program 是支持链式调用的,所以我们可以将 program.version()program.parse() 合并在一起,代码如下:

const { program } = require('commander');

program
  .version('1.0.0')
  .parse(process.argv);

总结一下实现版本号的过程,其实就一点,只需要将版本号传递给 program.version() 方法就可以了,commander 会自动帮我们处理 --version 这个参数,也就实现了 --version 的功能。

抽取版本号

上面的版本号是写死的,那么我们可以抽取出来,放到一个单独的文件中,这样方便我们统一管理版本号。

package.json 是我们项目的配置文件,里面有一个 version 字段,我们可以将这个字段抽取出来,放到一个单独的文件中,然后在 bin/index.js 中引入这个文件,这样就可以实现版本号的统一管理了。

bin 目录下新建一个 const.js 文件,然后将 package.json 中的 version 字段抽取出来,放到 const.js 文件中,代码如下:

const { version } = require('../package.json');

module.exports = {
  version,
};

然后在 bin/index.js 中引入这个文件,代码如下:

const { version } = require('./const');

program
  .version(version)
  .parse(process.argv);

这样就实现了版本号的统一管理了,以后只需要修改 package.json 中的 version 字段就可以了。

标签:process,Vue,CLI,版本号,argv,--,program,version
From: https://www.cnblogs.com/BNTang/p/18199325

相关文章

  • VSCode安装vue3插件
    1.以前的volar已经弃用了。2.最近vue插件 3.安装好插件后,在vscode中创建项目可能会报错。解决方法:1.使用window+r调出cmd,运行node-v,npm-v都没问题。那么尝试以管理员方式运行vscode,如果还是不行,重启一下电脑。2.网络原因,网络波动或者网比较差的时候导致下载丢包,把node......
  • 基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
    vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。如下图:H5+小程序+App端,多端......
  • 安装vue/cli报错问题解决
    在管理员终端中输入命令:npmi-g@vue/cli错误原因证书已过期,需要安装淘宝镜像npmconfigsetregistryhttps://registry.npmmirror.com使用cnpm安装脚手架报错cnpmi-g@vue/cli 这个错误表明你尝试执行的 cnpm 命令无法加载,因为PowerShell策略不允许执......
  • AnimationClip获取关键帧信息
    1,关键帧数据都保存在AnimationCurve上,所以首先要获取到这个publicstaticAnimationCurveGetAnimCurve(AnimationClipclip,stringpath,stringpropName){EditorCurveBinding[]bindings=AnimationUtility.GetCurveBindings(clip);foreach(varbinbindings)......
  • vue3+vite,写动态路由时候遇到的坑
    import导入一直报错,看了网上说import不行要写成 require之类的,都试了个遍,结果还是不行。一个很容易犯的错误:理所当然的以为alias是可以使用的。事实上写全相对路径就可以了!!! letr=awaitapis['common/getRouteList']()constlist=r.map((t)=>({id:t.id,pid......
  • Vue关闭eslintrc校验
    Vue关闭eslintrc校验vue.config.js文件添加lintOnSave:falseeslintrc.js文件①注释掉@vue/standard②添加‘vue/multi-word-component-names’:‘off’ ......
  • vuejs3.0 从入门到精通——vite+vue3+ts 显示找不到模块“../views/HomeView.vue”或
    vite+vue3+ts显示找不到模块“../views/HomeView.vue”或其相应的类型声明。ts(2307)一、在根目录下的env.d.ts文件(没有就自己创建)二、在env.d.ts文件中添加以下代码declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:DefineCo......
  • vue项目中实现表格的预览与编辑(luckysheet)
    在最近的项目中遇到了这么一个需求,需要对上传的表格进行呈现预览,并且可以在线对表格进行编辑,然后进行保存。思路:用到的组件 luckysheet   exceljs  FileSaver  LuckyExcel相关依赖:npminstallexceljsnpminstallFileSavernpminstallluckyexcel 相关步骤:......
  • 『手撕Vue-CLI』编码规范检查
    前言这篇为什么是编码规范检查呢?因为这是一个很重要的环节,一个好的编码规范可以让代码更加清晰易读,在官方的VUE-CLI也是有着很好的编码规范的,所以我也要加入这个环节。其实不管在哪个项目中,编码规范都是很重要的,像我们平日里的项目开发当中,我们也会使用ESLint来进行代码规......
  • vue3 ts 集成 tinymce
    首先引入@tinymce/tinymce-vueyarnadd@tinymce/tinymce-vue-S我的版本是然后写一个组件<template><mainid="sample"><Editorv-model="editorData"api-key="j7tvgx4xnptg3cjd63cfnl62z9s78uylw4o7vkkwdljjy91e":init=&qu......