交互式命令行美化工具——inquirer.js

前言：現(xiàn)在前端寫項目估計都是使用 NodeJs 來構建，一般在安裝 npm 包的時候，我們會對項目進行初始化，這是輸入命令：npm init 或 npm init -y。接下來就是幾個交互命令，輸入完成就會創(chuàng)建一個依賴文件：package.json。

但如果想自己做一個腳手架或者在某些時候在 CMD 窗口進行交互，這個時候就可以使用 inquirer.js。

首先npm init 初始化一個文件夾，來測試這個庫，然后安裝包：

npm install --save inquirer

再在文件夾里面新建一個 app.js，接下來的所有測試均在這個文件里面。

一、簡單功能參數(shù)介紹
  • type：表示提問的類型，包括：input、confirm、 list、rawlist、expand、checkbox、password、editor。
  • name: 存儲當前輸入的值。
  • message：問題的描述。
  • default：默認值。
  • choices：列表選項，在某些type下可用，并且包含一個分隔符(separator)；
  • validate：對用戶的回答進行校驗。
  • filter：對用戶的回答進行過濾處理，返回處理后的值。
  • when：根據前面問題的回答，判斷當前問題是否需要被回答。
  • pageSize：修改某些type類型下的渲染行數(shù)。
  • prefix：修改message默認前綴。
  • suffix：修改message默認后綴。
二、input輸入
2.1 一個輸入
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"input",
        message:"請輸入你的姓名：",
        name:"name",
        default:"大傻子"
    }
]).then(answer=>{
    // 用戶輸入的結果最終會在這里輸出
    console.log(answer);
});

運行測試結果：

C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： Condoe Hero
{ name: 'Condoe Hero' }

C:\Users\Administrator\Desktop\propt>
2.2 兩個輸入
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"input",
        message:"請輸入你的姓名：",
        name:"name",
        default:"大傻子"
    },
    {
        type:"input",
        message:"請輸入你的年齡:",
        name:"age",
        default:18
    }
]).then(answer=>{
    // 用戶輸入的結果最終會在這里輸出
    console.log(answer);
});

程序運行結果：

C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： Condor Hero
? 請輸入你的年齡: 18
{ name: 'Condor Hero', age: 18 }

C:\Users\Administrator\Desktop\propt>

接下來如果你想要一百個輸入那？肯定是。。。（情商）

2.3 validate驗證

看看 validate 是啥樣？

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"input",
        message:"請輸入你的姓名：",
        name:"name",
        default:"大傻子"
    },
    {
        type:"input",
        message:"請輸入你的年齡：",
        name:"age",
        default:18,
        validate:(val)=>{
            if(val > 10 && val < 120){
                return val;
            }else{
                return "我猜你絕對不是一個正常人類";
            }
        }
    }
]).then(answer=>{
    console.log(answer);
});

測試結果：

C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： 大傻子
? 請輸入你的年齡： (18) 18
>> 18
三、confirm確認
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"confirm",
        message:"是否現(xiàn)在監(jiān)聽？",
        name:"watch",
        default:true
    },
    {
        type: "confirm",
        message: "是否能看到我取決于上面是否通過？",
        name: "pass",
        suffix: "后綴",
        when: function(answer) { // 當watch為true的時候才會到達這步
            return answer.watch//只有我return true才會這個confirm
        }
    }
]).then(answer=>{
    console.log(answer);
});

看看三種不同輸入結果有啥變化？


四、前綴和后綴
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"confirm",
        message:"是否現(xiàn)在監(jiān)聽？",
        name:"watch",
        default:true,
        prefix:"☆☆☆☆"http://前綴
    },
    {
        type: "confirm",
        message: "是否能看到我取決于上面是否通過？",
        name: "pass",
        suffix: "****",//后綴
        when: function(answer) { // 當watch為true的時候才會到達這步
            return answer.watch //只有我return true才會這個confirm
        }
    }
]).then(answer=>{
    console.log(answer);
});
五、list 選項組
5.1使用箭頭選擇

list 一般配合 choices 使用：

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"list",
        message:"請選擇一個選項：",
        name:"fruit",
        default:"Apple",
        prefix:"☆☆☆☆",
        suffix:"****",
        choices:[
            "Apple",
            "pear",
            "Banana"
        ],
        filter: function (val) { // 使用filter將值變?yōu)榇髮?            return val.toUpperCase();
        }
    }
]).then(answer=>{
    console.log(answer);
});

查看動圖效果：


5.2 使用數(shù)字選擇

list 改成 rawlist

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"rawlist",
        message:"請選擇一個選項：",
        name:"fruit",
        default:"Apple",
        prefix:"☆☆☆☆",
        suffix:"****",
        choices:[
            "Apple",
            "pear",
            "Banana"
        ],
        filter: function (val) { // 使用filter將值變?yōu)榇髮?            return val.toUpperCase();
        }
    }
]).then(answer=>{
    console.log(answer);
});
5.3 使用簡寫（自動擴展成全寫）
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"expand",
        message:"請選擇一個顏色：",
        name:"color",
        default:"red",
        choices:[
            {
                key : 'R',
                value : "red"
            },
            {
                key : 'B',
                value : "blue"
            },
            {
                key : 'G',
                value : "green"
            }
        ]
    }
]).then(answer=>{
    console.log(answer);
});
expand

自己可以試試按下 h/H 回車的頁面是啥。

5.4 多選和分隔符
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"checkbox",
        message:"選擇一至多種顏色：",
        name:"color",
        choices:[
            {
                name : "red"
            },
            new inquirer.Separator(), // 添加分隔符
            {
                name : "blue"
            },
            {
                name : "green"
            },
            {
                name : "pink",
                checked : true//默認
            },
            new inquirer.Separator("--- 分隔符 ---"), // 自定義分隔符
            {
                name : "orange"
            }
        ]
    }
]).then(answer=>{
    console.log(answer);
});

如果不想自定義還可以：

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"checkbox",
        message:"選擇一至多種顏色：",
        name:"color",
        choices:[
            "red",
            "blue",
            "green",
            "pink",
            "orange"
        ]
    }
]).then(answer=>{
    console.log(answer);
});
5.5 密碼
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"password",
        message:"請輸入你的密碼：",
        name:"pwd"
    }
]).then(answer=>{
    console.log(answer);
});
5.6 輸入數(shù)字
const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"number",
        message:"請輸入數(shù)字：",
        name:"num"
    }
]).then(answer=>{
    console.log(answer);
});
5.7 編輯器

使用首選編輯器打開一個臨時文件，用戶退出編輯器后，將讀取臨時文件的內容。首選編輯器可以指定。

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"editor",
        message:"寫下你想寫的東西：",
        name:"editor"
    }
]).then(answer=>{
    console.log(answer);
});
5.8 行數(shù)

用來更改顯示行數(shù)只對list, rawList, expand 或 checkbox有效。

const inquirer = require("inquirer");
inquirer.prompt([
    {
        type:"checkbox",
        message:"選擇一至多種顏色：",
        name:"color",
        choices:[
            "red",
            "blue",
            "green",
            "pink",
            "orange"
        ],
        pageSize:1
    }
]).then(answer=>{
    console.log(answer);
});

只有一行，通過上下方向鍵來選擇：


2019年10月14日23:09:42

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容