前言
最近在开发一款自动格式化前端代码
的命令行工具(后续会分享具体实现,大家有兴趣可以点赞关注),用到了几个好用的npm工具,现在总结一下推荐给大家,希望能帮到各位!
首先这款命令行工具是基于node实现的,有需要实验的小伙伴需要安装node。
先给大家展示一下项目依赖:
这次要介绍npm工具为commander
和inquirer
,看一下怎么用这两款工具实现一个命令行工具。
我们先来看一下node的命令,看一下怎么查看node的版本:
我们在终端输入node -v
,可以看到node的版本为v12.22.6
。如果我们自己写的命令行工具,也想支持版本查询该怎么做的?这时commander
工具就可以帮上忙啦。
commander
我们在package.json
的bin
属性下定义一个命令node命令--specfic
,如下图所示:
现在看一下./dist/src/demo.js
的实现
import { program } from 'commander'
program.version('1.0.0', '-v,--version', '查看当前版本')
program.parse(process.argv)
我们在./dist/src/demo.js
引入了commander,并且给了定义了当前工具的版本为1.0.0
,定义完了以后我们在命令行里面调用specfic
命令,并加上-v
参数,可以看到输出的版本号为1.0.0
,与我们预设的一致。
我们在来看一下commander
,的其它用法,假设我们想定一个env
参数,让用户将当前代码的运行环境输入给命令行工具,该怎么做呢?还是利用commander
,代码如下:
import { program } from 'commander'
program.version('1.0.0', '-v,--version', '查看当前版本')
program.option('-p, --env [value]', '要应用统一规范的项目的路径')
program.parse(process.argv)
console.log(`当前代码的执行环境为${program.path}`)
我们先来看下效果,可以看到,当我们输入specfic -e 'node'
,命令行工具接收到了我们提供的代码运行环境。看到这里想必你已经清楚了commander
的用法,赶紧demo起来吧!
inquirer
下面我们分享的是inquirer
工具,我们来想个场景--在使用命令行工具时,有时候,我们需要根据他的提示,进行选择,譬如:当前的代码运行环境?('node'/'env')
,你在命令行中输如node
orenv
进行选择。这时候就可以用inquirer工具来实现啦。
先来看下我们的测试代码,我们执行该命令行工具,它会要求你依次进行选择。
import inquirer from 'inquirer'
function demo() {
const { jsLang, cssLang, vue, html } = await inquirer.prompt([
{
name: 'jsLang',
type: 'list',
message: 'js代码语言',
choices: ['js', 'ts']
},
{
name: 'cssLang',
type: 'list',
message: 'css代码语言',
choices: ['none', 'css', 'scss', 'less']
},
{
name: 'vue',
type: 'confirm',
message: '是否为vue项目?'
},
{
name: 'html',
type: 'confirm',
message: '是否存在html文件?'
}
])
console.log('您的输入为:', jsLang, cssLang, vue, html)
}
demo()
我们在命令行里面执行该代码看下效果。可以看到,命令行工具给出了问题,也接收到了用户给出的答案,成功实现一问一答的功能!
总结
通过上面分享的命令行工具,我们就可以轻松的实现“人机”交互,迈出了开发一款命令行工具的第一步!
如果大家想要继续深入的了解这两款工具,可以请戳官方链接inquirer与commander