2022/01/[Varlet]进阶篇:好用的工具(上)/index

前言

cli的开发工程中,我们用上了一些好用的工具,这极大的提升了我们的开发效率。

在本篇中,我将对这些好用的工具进行介绍。

注意:以下所有示例均以 Macos 环境为例

准备工作

  • 我们先新建一个空项目,然后打开命令行进入到该项目中
  • 执行npm init完成项目初始化
  • 此时我们的工程中应该有一个package.json文件, 在该文件中增加bin配置,如下图所示

image.png

  • 其中,write-cli是cli工具的名称,对应的 value 值是文件入口
  • 编辑index.js,内容如下:
    image.png

这里的第一行非常重要!!!
这里的第一行非常重要!!!
这里的第一行非常重要!!!

用来指明运行环境

然后我们通过npm link进行本地安装,然后再执行write-cli,就可以看到运行效果了

image.png

commander

介绍

commandernodejs命令行操作的完整解决方案,提供了用户命令行输入和参数解析强大功能。

安装

1
npm install commander

基本用法

1
2
3
4
const { Command } = require('commander');
const program = new Command()
program.version(require('./package').version, '-v, --version')
program.parse();

image.png

当你出现这样的信息时,说明你已经掌握了commander的基本用法

create原来如此简单

相信不少小伙伴们都用过Vue CLI或者create-react-app这些著名的cli工具,里面肯定少不了创建项目的命令create,我们就一起来看看create是如何工作的吧

image.png

一些解释:

  • 我们通过.command()类配置create命令。第一个参数为命令名称。命令参数跟在名称后面
  • 尖括号表示参数可为必选(方括号为可选)
  • description为命令的描述
  • action处理子级命令

具体的create的代码实现,将会在后续的篇幅中更详细的讲解

inquirer

我们在使用cli中不可避免的会有一些命令行交互。

在上文提到的两个出色的脚手架的使用中以及我们npm init时都出现了一些用户交互。

因此在我们的cli项目中要使用这样的交互的话,就不得不介绍一下inquirer了。

安装

1
npm install inquirer

常见用法

我们以varlet-cli为例来实现选择的交互

image.png

我们来改写一下create

1
2
3
4
5
6
7
8
9
const create = ()=>{
inquirer.prompt([
{
name: 'Please select your component library programming style',
type: 'list',
choices: ['sfc', 'tsx'],
},
])
}

再次执行write-cli create hello,相信聪明的你已经跑出来了跟上图一样的界面界面了。

看到这里,相信有小伙伴们会有新的疑问了,如何捕获用户的输入或者选择呢。

不急,我们慢慢往下看

1
2
3
4
5
6
inquirer.prompt([
{
name: 'Please input some text',
type: 'input' // 供用户输入
}
])

然后我们从官方的文档中的

inquirer.prompt(questions, answers) -> promise

我们可以看出,用户的输入以promise的形式返回

因此我们使用async await来接收用户的输入

这样我们就完成了捕获

image.png

chalk

我们可以通过chalk来是我们的命令行颜色变得丰富多彩。

安装

1
npm install chalk

在本文中为了方便演示 我们使用4.1.2版本

简单使用

我们举几个栗子🌰

1
2
3
4
5
6
7
const log = console.log;

log(chalk.magenta('Hello') + ' Varlet' + chalk.red('!'));

log(chalk.blue.bgYellow.bold('Hello Varlet!'));

log(chalk.green('Hello', 'Varlet!', 'Jokerrr', 'bar', 'biz', 'baz'));

image.png

cli中我们会将不同的提示信息用不同的色彩区分开进行输出。

最后

以上为我们用到的一部分工具库,还有一些同样好用的库我将在《进阶篇:好用的工具(下)》中继续介绍,敬请期待。

参考文档 commander,inquirer,chalk,

文章作者: Joker
文章链接: https://qytayh.github.io/2022/01/[Varlet]%E8%BF%9B%E9%98%B6%E7%AF%87%EF%BC%9A%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7(%E4%B8%8A)/index/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Joker's Blog