JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器
前言
我們在用腳手架初始化項(xiàng)目的時(shí)候，往往會(huì)進(jìn)行一些命令交互，用過vue或者react的用腳手架新建項(xiàng)目的應(yīng)該都進(jìn)行過命令交互，vue創(chuàng)建的時(shí)候會(huì)讓你選擇vue2還是vue3，也有多選要什么配置，也有輸入y或者n選擇是否用history路由等，這些簡單的交互其實(shí)用inquire這個(gè)包都能實(shí)現(xiàn)，但是最近自己在做一個(gè)小工具的時(shí)候，想要進(jìn)行文件和文件夾的選擇，這時(shí)我發(fā)現(xiàn)inquire里并沒有這個(gè)交互功能，所以便自己嘗試去在inquire這個(gè)庫的基礎(chǔ)上實(shí)現(xiàn)文件選擇和文件夾選擇這兩種類型的交互。
插件效果
通過該插件，我們可以在控制臺(tái)通過方向鍵來選擇文件和文件夾，具體效果如下：
插件實(shí)現(xiàn)
Inquirer.js
Inquirer.js試圖為NodeJs做一個(gè)可嵌入式的美觀的命令行界面。
如下圖：
inquirer原有參數(shù)
- type
表示提問的類型，包括：input、confirm、 list、rawlist、expand、checkbox、password、editor。
- name
存儲(chǔ)當(dāng)前輸入的值。
- message
問題的描述。
- default
默認(rèn)值。
- choices
列表選項(xiàng)，在某些type下可用，并且包含一個(gè)分隔符(separator)；
- validate
對(duì)用戶的回答進(jìn)行校驗(yàn)。
- filter
對(duì)用戶的回答進(jìn)行過濾處理，返回處理后的值。
- when
根據(jù)前面問題的回答，判斷當(dāng)前問題是否需要被回答。
- pageSize
修改某些type類型下的渲染行數(shù)。
- prefix
修改message默認(rèn)前綴。
- suffix
修改message默認(rèn)后綴。
二次封裝
基于inquirer原有功能及參數(shù)，增加一些擴(kuò)展功能及參數(shù)
新增參數(shù)
- notNull
是否不能為空，默認(rèn)為false，設(shè)置為true后該參數(shù)不能輸入空，并且會(huì)有不能為空的提示，必須輸入字符后才可以回車確認(rèn)并進(jì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
此項(xiàng)為新增配置，設(shè)置目錄和文件選擇器選中路徑輸出的格式，默認(rèn)為相對(duì)路徑，可以設(shè)置為absolute，此時(shí)會(huì)輸出絕對(duì)路徑，效果如下圖：
{
type:"file",
message:"請選擇文件：",
name:"fileName",
default:"",
},
{
type:"folder",
message:"請選擇文件夾：",
name:"folderName",
default:"",
pathType:'absolute'
},
代碼實(shí)現(xiàn)
獲取指定路徑下的文件列表
使用fs中的readdirSync方法可以獲取指定目錄下的文件列表，具體代碼如下：
getFileList = (dirPath)=>{
const list = fs.readdirSync(dirPath);
return ['../(返回上一級(jí))',...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 + '(進(jìn)入文件夾)');
resList.push(item + '(選擇文件夾)');
}
});
return ['../(返回上一級(jí))',...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);
}
}選擇文件
- 選擇的為
返回上一級(jí)，則將當(dāng)前目錄回退一級(jí)：
this.clear(2); return this.chooseFile(option,path.join(dirPath,'/../'));
- 選擇的是目錄則進(jìn)入選擇的目錄：
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] == '../(返回上一級(jí))'){
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ū)分選擇文件夾和進(jìn)入文件夾：
選擇的為返回上一級(jí)，則將當(dāng)前目錄回退一級(jí)：
this.clear(2); return this.chooseFile(option,path.join(dirPath,'/../'));
選擇的是進(jìn)入文件夾，則進(jìn)入該目錄，這里需要將加入用于區(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] == '../(返回上一級(jí))'){
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:"請選擇一個(gè)顏色：",
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封裝一個(gè)控制臺(tái)文件選擇器的文章就介紹到這了,更多相關(guān)JS inquirer封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)五種不同煙花特效
這篇文章主要給大家?guī)砦鍌€(gè)好看的基于 HTML+CSS+JS 的煙花特效，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-01-01
html代碼調(diào)試腳本...2006-07-07
判斷是否安裝flash player及當(dāng)前版本的JS代碼
本文為大家講述下如何使用jsJS判斷是否安裝flash player及版本，下面的處理代碼或許對(duì)大家有所幫助，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
這篇文章主要給大家介紹了關(guān)于js中的深淺拷貝問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購物車邏輯和功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了微信小程序提交form操作,結(jié)合實(shí)例形式分析了微信小程序開發(fā)中使用form組件實(shí)現(xiàn)數(shù)據(jù)提交與數(shù)據(jù)處理相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
在?JavaScript?中,數(shù)組和字符串都是常用的數(shù)據(jù)結(jié)構(gòu),在實(shí)際開發(fā)中,操作數(shù)組和字符串是非常頻繁的任務(wù),concat()?方法就是用于合并數(shù)組或字符串的一種常見方法,在本文中,我們將詳細(xì)探討?concat()?方法的用法和示例,需要的朋友可以參考下2024-11-11
JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法詳解【普里姆算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
這篇文章主要介紹了js封裝可使用的構(gòu)造函數(shù)繼承用法,實(shí)例分析了使用屬性拷貝來實(shí)現(xiàn)拷貝繼承的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS常見錯(cuò)誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07