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

vue,cli · 浏览次数 : 0

小编点评

**实现帮助 --help** ```javascript const { program } = require('commander'); program.version('1.0.0'); program.parse(process.argv); if (process.argv[2] === '--help') { console.log('Hello, world!'); } else if (process.argv[2] === '--version') { console.log('1.0.0'); } ``` **实现版本号 --version** ```javascript const { program } = require('commander'); program.version('1.0.0'); program.parse(process.argv); console.log(program.version); ``` **使用 commander 库实现命令行工具** * 安装依赖:`npm install commander` * 使用 commander 库实现帮助和版本号功能: ```javascript const { program } = require('commander'); const { version } = require('../package.json'); module.exports = { version,}; const { version } = require('./const'); program .version(version) .parse(process.argv); ``` **其他补充** * `process.argv` 数组中的第一个元素是 Node.js 的路径,第二个元素是当前执行的文件路径。 * `program.parse(process.argv)` 方法可以解析用户输入的参数并将其存储在 `program.argv` 中。 * `commander` 库可以帮助我们更好地处理命令行参数,例如处理选项、默认值和其他参数。

正文

前言

经过上一篇『手撕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 字段就可以了。

与『手撕Vue-CLI』添加帮助和版本号相似的内容:

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

前言 经过上一篇『手撕Vue-CLI』编码规范检查之后,手撕 Vue-CLI 已经进阶到了代码规范检查这一步,已经将基本的工程搭建好了,然后代码规范约束也已经加入了,并且将 nue-cli 指令绑定到了全局当中,可以在任何地方使用了。 正文 接下来这篇文章呢,就要来实现一下大多数的命令行工具都会有的

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli