JavaScript基于inquirer封裝一個控制臺文件選擇器

更新時間：2022年08月02日 09:00:11 作者：JYeontu

這篇文章主要介紹了JavaScript基于inquirer封裝一個控制臺文件選擇器，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下

前言

我們在用腳手架初始化項目的時候，往往會進行一些命令交互，用過vue或者react的用腳手架新建項目的應(yīng)該都進行過命令交互，vue創(chuàng)建的時候會讓你選擇vue2還是vue3，也有多選要什么配置，也有輸入y或者n選擇是否用history路由等，這些簡單的交互其實用inquire這個包都能實現(xiàn)，但是最近自己在做一個小工具的時候，想要進行文件和文件夾的選擇，這時我發(fā)現(xiàn)inquire里并沒有這個交互功能，所以便自己嘗試去在inquire這個庫的基礎(chǔ)上實現(xiàn)文件選擇和文件夾選擇這兩種類型的交互。

插件效果

通過該插件，我們可以在控制臺通過方向鍵來選擇文件和文件夾，具體效果如下：

插件實現(xiàn)

Inquirer.js

Inquirer.js試圖為NodeJs做一個可嵌入式的美觀的命令行界面。

如下圖：

inquirer原有參數(shù)

type

表示提問的類型，包括：input、confirm、 list、rawlist、expand、checkbox、password、editor。

name

存儲當(dāng)前輸入的值。

message

問題的描述。

default

默認(rèn)值。

choices

列表選項，在某些type下可用，并且包含一個分隔符(separator)；

validate

對用戶的回答進行校驗。

filter

對用戶的回答進行過濾處理，返回處理后的值。

when

根據(jù)前面問題的回答，判斷當(dāng)前問題是否需要被回答。

pageSize

修改某些type類型下的渲染行數(shù)。

prefix

修改message默認(rèn)前綴。

suffix

修改message默認(rèn)后綴。

二次封裝

基于inquirer原有功能及參數(shù)，增加一些擴展功能及參數(shù)

新增參數(shù)

notNull

是否不能為空，默認(rèn)為false，設(shè)置為true后該參數(shù)不能輸入空，并且會有不能為空的提示，必須輸入字符后才可以回車確認(rèn)并進行下一步，如下圖：

{
    type:"input",
    message:"請輸入你的姓名：",
    name:"name",
    notNull:true
}

type

在原有類型中新增兩種類型：file、folder，分別為文件選擇器和目錄選擇器，效果如下圖：

{
    type:"file",
    message:"請選擇文件：",
    name:"fileName",
    default:"",
},
{
    type:"folder",
    message:"請選擇文件夾：",
    name:"folderName",
    default:"",
    pathType:'absolute'
},

pathType

此項為新增配置，設(shè)置目錄和文件選擇器選中路徑輸出的格式，默認(rèn)為相對路徑，可以設(shè)置為absolute，此時會輸出絕對路徑，效果如下圖：

{
    type:"file",
    message:"請選擇文件：",
    name:"fileName",
    default:"",
},
{
    type:"folder",
    message:"請選擇文件夾：",
    name:"folderName",
    default:"",
    pathType:'absolute'
},

代碼實現(xiàn)

獲取指定路徑下的文件列表

使用fs中的readdirSync方法可以獲取指定目錄下的文件列表，具體代碼如下：

getFileList = (dirPath)=>{
    const list = fs.readdirSync(dirPath);
    return ['../(返回上一級)',...list];
}

獲取指定路徑下的目錄列表

使用fs中的readdirSync方法可以獲取指定目錄下的文件列表，通過isDirectory方法可以判斷文件是否為目錄文件，具體代碼如下：

getFolderList = (dirPath)=>{
    const list = fs.readdirSync(dirPath);
    let resList = [];
    list.map(item=>{
        const fullPath = path.join(dirPath,item);
        if(fs.statSync(fullPath).isDirectory()){
            resList.push(item + '(進入文件夾)');
            resList.push(item + '(選擇文件夾)');
        }
    });
    return ['../(返回上一級)',...resList];
}

交互類型響應(yīng)控制

新增的file和folder類型使用自己重新封裝的方法，其他依舊使用Inquirer中的響應(yīng)方法，具體代碼如下：

run(option){
    if(option.type === 'file'){
        return this.chooseFile(option);
    }else if(option.type === 'folder'){
        return this.chooseFolder(option);
    }else{
        if(option.notNull){
            const flag = option.message.slice(-1);
            if(["：",":"].includes(flag)){
                option.message = option.message.slice(0,-1) + '(不能為空)' + flag;
            }
        }
        return this.defaultType(option);
    }
}

選擇文件

選擇的為返回上一級，則將當(dāng)前目錄回退一級：

this.clear(2);
return this.chooseFile(option,path.join(dirPath,'/../'));

return path.join(dirPath, answer[option.name]);

選擇的是文件則返回選擇的文件路徑并結(jié)束操作：

this.clear(2);
return this.chooseFile(option,fullPath);

完整代碼如下：

chooseFile(option,dirPath = './'){
    option.type = 'list';
    option.suffix = "(當(dāng)前瀏覽目錄：" + path.join(__dirname,dirPath) + ')';
    option.pageSize = fs.readdirSync('./').length + 1;
    option.choices = [...this.getFileList(dirPath)];
    const answer = await inquirer.prompt([
        option
    ]);
    if(answer[option.name] == '../(返回上一級)'){
        this.clear(2);
        return this.chooseFile(option,path.join(dirPath,'/../'));
    }else{
        const fullPath = path.join(dirPath, answer[option.name]);
        if(!fs.statSync(fullPath).isFile()){
            this.clear(2);
            return this.chooseFile(option,fullPath);
        }else{
            return path.join(dirPath, answer[option.name]);
        }
    }
}

選擇目錄

如下圖，這里使用后綴說明來區(qū)分選擇文件夾和進入文件夾：

選擇的為返回上一級，則將當(dāng)前目錄回退一級：

this.clear(2);
return this.chooseFile(option,path.join(dirPath,'/../'));

選擇的是進入文件夾，則進入該目錄，這里需要將加入用于區(qū)分的后綴去掉再返回：

return path.join(dirPath, answer[option.name].slice(0,-7));

選擇的是選擇文件夾則返回選擇的文件夾路徑并結(jié)束操作：

this.clear(2);
return this.chooseFile(option,fullPath);

完整代碼如下：

chooseFile(option,dirPath = './'){
    option.type = 'list';
    option.suffix = "(當(dāng)前瀏覽目錄：" + path.join(__dirname,dirPath) + ')';
    option.pageSize = fs.readdirSync('./').length + 1;
    option.choices = [...this.getFileList(dirPath)];
    const answer = await inquirer.prompt([
        option
    ]);
    if(answer[option.name] == '../(返回上一級)'){
        this.clear(2);
        return this.chooseFile(option,path.join(dirPath,'/../'));
    }else{
        const fullPath = path.join(dirPath, answer[option.name]);
        if(!fs.statSync(fullPath).isFile()){
            this.clear(2);
            return this.chooseFile(option,fullPath);
        }else{
            return path.join(dirPath, answer[option.name]);
        }
    }
}

基本類型調(diào)用Inquirer處理

這里增加了notNull(是否不能為空)的參數(shù)，代碼如下：

defaultType(option){
    const answer = await inquirer.prompt([
        option
    ]);
    if(option.notNull && answer[option.name] === ''){
        this.clear(2);
        return this.defaultType(option);
    }
    return answer[option.name];
}

插件使用

1、安裝依賴

npm install @jyeontu/j-inquirer

2、在代碼中引用

const JInquirer = require('@jyeontu/j-inquirer');

3、示例代碼

const JInquirer = require('@jyeontu/j-inquirer');
let options = [
    {
        type:"input",
        message:"請輸入你的姓名：",
        name:"name",
        notNull:true
    },{
        type:"input",
        message:"請輸入你的年齡:",
        name:"age",
        default:18,
        validate:(val)=>{
            if(val < 0 || val > 150){
                return "請輸入0~150之間的數(shù)字";
            }
            return true;
        }
    },{
        type:"file",
        message:"請選擇文件：",
        name:"fileName",
        default:"",
    },{
        type:"folder",
        message:"請選擇文件夾：",
        name:"folderName",
        default:"",
        pathType:'absolute'
    },{
        type:"list",
        message:"請選擇你喜歡的水果：",
        name:"fruit",
        default:"Apple",
        choices:[
            "Apple",
            "pear",
            "Banana"
        ],
    },{
        type:"expand",
        message:"請選擇一個顏色：",
        name:"color",
        default:"red",
        choices:[
            {
                key : 'R',
                value : "red"
            },
            {
                key : 'B',
                value : "blue"
            },
            {
                key : 'G',
                value : "green"
            }
        ]
    },{
        type:"checkbox",
        message:"選擇一至多種顏色：",
        name:"color2",
        choices:[
            "red",
            "blue",
            "green",
            "pink",
            "orange"
        ]
    },{
        type:"password",
        message:"請輸入你的密碼：",
        name:"pwd"
    },{
        type:"editor",
        message:"寫下你想寫的東西：",
        name:"editor"
    }
];
let j = new JInquirer(options);
let res = j.prompt().then(res=>{
    console.log(res);
});

到此這篇關(guān)于JavaScript基于inquirer封裝一個控制臺文件選擇器的文章就介紹到這了,更多相關(guān)JS inquirer封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript基于inquirer封裝一個控制臺文件選擇器

目錄

前言

插件效果

插件實現(xiàn)

Inquirer.js

inquirer原有參數(shù)

二次封裝

新增參數(shù)

代碼實現(xiàn)

獲取指定路徑下的文件列表

獲取指定路徑下的目錄列表

交互類型響應(yīng)控制

選擇文件

選擇目錄

基本類型調(diào)用Inquirer處理

插件使用

1、安裝依賴

2、在代碼中引用

3、示例代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript基于inquirer封裝一個控制臺文件選擇器

目錄

前言

插件效果

插件實現(xiàn)

Inquirer.js

inquirer原有參數(shù)

二次封裝

新增參數(shù)

代碼實現(xiàn)

獲取指定路徑下的文件列表

獲取指定路徑下的目錄列表

交互類型響應(yīng)控制

選擇文件

選擇目錄

基本類型調(diào)用Inquirer處理

插件使用

1、安裝依賴

2、在代碼中引用

3、示例代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、安裝依賴

2、在代碼中引用