关于前端:Node-系列-004-Inquirerjs

39次阅读

共计 10373 个字符，预计需要花费 26 分钟才能阅读完成。

——————————☆☆☆——————————

Node 系列相应地址：

  • 代码仓库：https://github.com/LiangJunro…
  • 文章仓库：https://github.com/LiangJunro… 系列 - 前端材料 /Node

——————————☆☆☆——————————

一 前言

通过后面 TypeScript 环境的搭建和 commander.js 的配合，咱们当初能够在 .ts 文件中编写对应指令，而后通过 npm run xxx 来运行我的项目了，然而这种形式有个 Bug：

  • 当指令过多的时候，咱们压根记不住那么多的指令！

所以，就须要一个智能提醒，将指令简化并可视化。

二 集成 Inquirer.js

这边 jsliang 想的一个法子就是通过终端那种问答模式的来解决这个问题（后续可能安顿页面或者 Chrome 插件等）

那么，废话少说，Here we go~

首先 ，装置必须的包：

  • 装置 Inquirer.js：npm i inquirer
  • 装置 @types/inquirer（可选，TS 必装）：npm i @types/inquirer -D

而后 。咱们就能够开始耍起来了，接入后面的 TypeScript 和 commander.js，拿起 index.ts 和 package.json 就是一顿批改：

src/index.ts

import program from 'commander';
import inquirer from 'inquirer';
import {sortCatalog} from './sortCatalog';

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮忙指令')
  .action(() => {
    inquirer
    .prompt([
      { 
        type: 'rawlist',
        name: 'question1',
        message: '请问须要什么服务？',
        choices: ['公共服务', '其余']
      },
    ])
    .then((answers) => {if (answers.question1 === '公共服务') {
        inquirer.prompt([
          {
            type: 'rawlist',
            name: 'question',
            message: '以后公共服务有：',
            choices: ['文件排序']
          }
        ]).then((answers) => {if (answers.question === '文件排序') {
            inquirer.prompt([
              {
                type: 'input',
                name: 'question',
                message: '须要排序的文件夹为？（绝对路径）',
                default: 'D:/xx',
              }
            ]).then(async (answers) => {const result = await sortCatalog(answers.question);
              if (result) {console.log('排序胜利！');
              }
            }).catch((error) => {console.error('出错啦！', error);
            });
          }
        }).catch((error) => {console.error('出错啦！', error);
        });
      } else if (answers === '其余') {// 做其余事件}
    }).catch((error) => {console.error('出错啦！', error);
    });
  });

program.parse(process.argv);

留神这里 sort 改成 jsliang 了（人不要脸天下无敌）。

package.json

{
  "name": "jsliang",
  "version": "1.0.0",
  "description": "Fe-util, Node 工具库",
  "main": "index.js",
  "scripts": {"jsliang": "ts-node ./src/index.ts jsliang"},
  "keywords": [
    "jsliang",
    "Node 工具库",
    "Node"
  ],
  "author": "jsliang",
  "license": "ISC",
  "devDependencies": {
    "@types/inquirer": "^7.3.1",
    "@types/node": "^15.12.2",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "eslint": "^7.28.0",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "commander": "^7.2.0",
    "inquirer": "^8.1.0"
  }
}

于是就有了成果：

一样的丝滑好用，还能够管制文件夹门路了~

然而！小伙伴们看到下面代码，是不是有种想吐的感觉。

  • 问题 1：呀，这是啥，这些代码你写了什么性能？
  • 问题 2：太恶心了吧，竟然不反对 async/await？

OK，一一解决问题，咱们先解说下 Inquirer.js 外面的一些操作。

三 Inquirer.js 应用技巧

在下面的代码中，通过 .prompt(Array<Object>) 能够传递多个问题信息，而后通过回调获取答案，举例一个输入框：

inquirer.prompt([
  { 
    type: 'input',
    name: 'question',
    message: '请问须要什么服务？',
  }
]).then((res) => {console.log('胜利！', res);
}).catch((err) => {console.error('报错！', err);
});

其中 Object 外面能够塞：

  • type：【String】提醒的类型，默认 input，蕴含 input、number、confirm、list、rawlist、expand、checkbox、password、editor
  • name：【String】存储以后问题答复的变量
  • message：【String|Function】发问的问题内容
  • default：【String|Number|Boolean|Array|Function】默认值
  • choices：【Array|Function】列表选项
  • validate：【Function】验证办法，校验输出值是否可行，无效返回 true，否则返回字符串示意错误信息（返回 false 则为默认的错误信息）
  • filter：【Function】对答案进行过滤解决，返回解决后的值
  • transformer：【Function】操作答案的显示成果
  • when：【Function|Boolean】承受答案，依据后面的内容判断是否须要展现该问题
  • pageSize：【Number】在 list、rawlist、expand、checkbox 这种多选项中，进行分页拆分
  • prefix：【String】批改默认前缀
  • suffix：【String】批改默认后缀
  • askAnswered：【Boolean】已有答案是否强制发问
  • loop：【Boolean】list 是否能循环滚动抉择，默认 true

置信你也看不懂，咱们将一些可能用到的写一写用例吧。

后续代码为简写，全写大略为上面代码所示，前面就不颤抖了 

import program from 'commander';
import inquirer from 'inquirer';

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮忙指令')
  .action(() => {
    inquirer
    .prompt([
      { 
        type: 'rawlist',
        name: 'question',
        message: '请问须要什么服务？',
        choices: ['公共服务', '其余']
      },
    ])
    .then((answers) => {console.log('答案：', answers);
    }).catch((error) => {console.error('出错啦！', error);
    });
  });

program.parse(process.argv);

留神：
① 上面这些举例，你也能够在 Inquires.js 中找到，然而 jsliang 心愿搬运到本人这篇文章中不便后续检索。
② 如果有评论没看到这个正文就吐槽 jsliang 缮写人家 README，那 jsliang 也无话可说，只是被吐槽了几次，略微写点正文

3.1 输入框

输出文本 ：

可配合参数：type, name, message[, default, filter, validate, transformer]

inquirer.prompt([
  { 
    type: 'input',
    name: 'question',
    message: '问题？',
    default: 'liangjunrong',
  }
]);

输出数字 ：

可配合参数：type, name, message[, default, filter, validate, transformer]

inquirer.prompt([
  { 
    type: 'number',
    name: 'question',
    message: '问题？',
    default: '1',
  }
]);

输出明码 ：

可配合参数：type, name, message, mask,[, default, filter, validate]

inquirer.prompt([
  { 
    type: 'password',
    name: 'question',
    message: '问题？',
  }
]);

3.2 单选项

没下标的单选项 ：

可配合参数：type, name, message, choices[, default, filter, loop]

inquirer.prompt([
  { 
    type: 'list',
    name: 'question',
    message: '问题？',
    default: 'jsliang',
    choices: ['liangjunrong', 'jsliang']
  }
]);

增加分隔符 ：

inquirer.prompt([
  { 
    type: 'list',
    name: 'question',
    message: '问题？',
    default: 'jsliang',
    choices: [
      'liangjunrong',
      new inquirer.Separator(), // 增加分隔符
      'jsliang',
    ]
  }
]);

有下标的单选项 ：

可配合参数：type, name, message, choices[, default, filter, loop]

inquirer.prompt([
  { 
    type: 'rawlist',
    name: 'question',
    message: '问题？',
    default: 'jsliang',
    choices: ['liangjunrong', 'jsliang']
  }
]);

3.3 多选项

可配合参数：type, name, message, choices[, filter, validate, default, loop]

inquirer.prompt([
  { 
    type: 'checkbox',
    name: 'question',
    message: '问题？',
    choices: ['liangjunrong', 'jsliang']
  }
]);

3.4 确认框

可配合参数：type, name, message, [default]

inquirer.prompt([
  { 
    type: 'confirm',
    name: 'question',
    message: '问题?',
  }
]);

3.5 校验输出 

inquirer.prompt([
  { 
    type: 'input',
    name: 'phone',
    message: '请输出手机号',
    validate: (val) => {if (val.match(/\d{11}/g)) {return true;}
      return '请输出 11 位数字';
    },
  }
]);

四 动静发问

下面咱们说了 2 个问题：

  • 问题 1：呀，这是啥，这些代码你写了什么性能？
  • 问题 2：太恶心了吧，竟然不反对 async/await？

方才曾经将问题 1 解决了（就是这个 Inquires.js 性能反对），上面咱们看看问题 2 怎么操作。

其实为了解决这个问题，咱们须要依照 Inquires.js 中的举荐装置 Rx.js，Rx.js 参考文献：

  • GitHub：rxjs
  • RxJS 中文文档

开始装置：

  • 装置 rxjs：npm i rxjs@5

以后版本为 v7.1.0，然而看了下 Inquirer.js 举例的是 v5.x 版本，找了一会找不到新版本的用法，只能出此下举

其次 jsliang 是真的懒，不想理解 Rx.js 做啥子的，我只心愿我的项目能依照 async/await 形式跑起来 

import program from 'commander';
import Rx from 'rxjs/Rx';
import inquirer from 'inquirer';

const prompts = new Rx.Subject();

// 有情的信息处理器
inquirer.prompt(prompts).ui.process.subscribe((result) => {console.log('胜利：', result);
}, (error: unknown) => {console.error('失败', error);
}, () => {console.log('实现');
});

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮忙指令')
  .action(() => {
    prompts.next({
      type: 'confirm',
      name: 'question',
      message: '问题?',
    });
    prompts.complete();});

program.parse(process.argv);

这样就实现了封装，更不便解决信息了。（能够设想前面会有一堆 switch...case... 判断）

然而，料想不到的是，在多个模块接入 Inquire.js 后，出问题了。

多个模块示例 

+ src
  - index.ts
  + base
    - config.ts
  + common
    - inquirer.ts
  + jsliang
    - inquirer.ts

暂不须要依照这个目录更改接口，以下一个目录为准

集体狐疑 Rx.js 是单实例缘故

运行时报错提醒：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jsliang@1.0.0 test: `ts-node ./src/index.ts test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jsliang@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wps\AppData\Roaming\npm-cache\_logs\2021-06-08T11_46_58_005Z-debug.log

排查了老久，应该跟我不相熟 RX.js 无关，所以就想着能不能更新一波：

【准】依照这个目录更改文件夹 / 文件 

+ src —————————————————————— src 文件夹
  - index.ts ——————————————— 主入口
  + base ——————————————————— 根底文件夹，例如 config/math 等
    - config.ts ———————————— 罕用配置项
    - inquirer.ts —————————— inquirer 总解决口，对立封装 async/await
    - interface.ts ————————— 临时将所有通用的 interface.ts 放到这里
  + common ————————————————— 通用性能
    - index.ts ————————————— common 解决问题的入口
    - sortCatalog.ts —————— inquirer 调用具体的性能文件
  + jsliang ———————————————— 业务性能
    - xx.ts ———————————————— 业务性能文件

顺带给个目录图吧：

src/base/inquirer.ts

import * as myInquirer from 'inquirer';
import Rx from 'rxjs/Rx';
import {Question} from './interface';

export const inquirer = (questions: Question[], answers: any): void => {const prompts = new Rx.Subject();

  // 长度判断
  if (questions.length !== answers.length) {console.error('问题和答案长度不统一！');
  }

  // 问题列表
  const questionList = questions.map((item, index) => {return () => {prompts.next(Object.assign({}, item, {name: String(index),
      }));
    };
  });

  // 问题处理器
  myInquirer.prompt(prompts).ui.process.subscribe(async (res) => {console.log('执行胜利，输出信息为：', res);
    const index = Number(res.name);
    
    // 回调函数：后果、问题列表、prompts（管制是否须要进行）answers[index](res, questionList, prompts);

    // 默认最初一个问题就主动终止
    if (index === answers.length - 1) {prompts.complete(); // 回调函数能够手动管制终止询问机会
    }
  }, (error: unknown) => {console.error('执行失败，报错信息为：', error);
  }, () => {// console.log('实现'); // 必定会执行的代码
  });

  // 执行第一个问题
  questionList[0]();};

src/base/interface.ts

export interface Question {
  type: string,
  name?: string,
  message: string,
  default?: string,
  choices?: string[],
  validate?(): boolean,}

export interface Result {
  name: string,
  answer: string,
}

依照这样子设置后，就能够在其余中央欢快游玩了：

src/common/index.ts

import {inquirer} from '../base/inquirer';
import {Result} from '../base/interface';
import {sortCatalog} from './sortCatalog';

const common = (): void => {
  // 测试新个性
  const questionList = [
    {
      type: 'list',
      message: '请问须要什么服务？',
      choices: ['公共服务', '其余']
    },
    {
      type: 'list',
      message: '以后公共服务有：',
      choices: ['文件排序']
    },
    {
      type: 'input',
      message: '须要排序的文件夹为？（绝对路径）',
      default: 'D:/xx',
    },
  ];

  const answerList = [async (result: Result, questions: any) => {if (result.answer === '公共服务') {questions[1]();} else if (result.answer === '其余') {
        // 做其余事件
        console.log('暂未开明该服务');
      }
    },
    async (result: Result, questions: any) => {console.log(result);
      if (result.answer === '文件排序') {questions[2]();}
    },
    async (result: Result) => {const sortResult = await sortCatalog(result.answer);
      if (sortResult) {console.log('排序胜利！');
      }
    },
  ];

  inquirer(questionList, answerList);
};

export default common;

传递问题数组，而后回调函数解决内容，满足我以后的需要，咱就不再革新了。

其余具体文件内容如下：

src/index.ts

import program from 'commander';
import common from './common';

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮忙指令')
  .action(() => {common();
  });

program.parse(process.argv);

src/base/config.ts

/**
 * @name 默认的全局配置
 * @time 2021-05-22 16:12:21
 */
import path from 'path';

// 根底目录
export const BASE_PATH = path.join(__dirname, './docs');

// 疏忽目录
export const IGNORE_PATH = [
  '.vscode',
  'node_modules',
];

src/common/sortCatalog.ts

/**
 * @name 文件排序功能
 * @time 2021-05-22 16:08:06
 * @description 规定
   1. 零碎程序 1/10/2/21/3，心愿排序 1/2/3/10/21
   2. 插入文件 1/2/1-1，心愿排序 1/2/3（将 1-1 变成 2，2 变成 3）*/
import fs from 'fs';
import path from 'path';
import {IGNORE_PATH} from '../base/config';

const recursion = (filePath: string, level = 0) => {const files = fs.readdirSync(filePath);

  files
    .filter((item => !IGNORE_PATH.includes(item))) // 过滤疏忽文件 / 文件夹
    .sort((a, b) =>
      Number((a.split('.')[0]).replace('-', '.'))
      - Number((b.split('.')[0]).replace('-', '.'))
    ) // 排序文件夹
    .forEach((item, index) => { // 遍历文件夹
      // 设置旧文件名称和新文件名称
      const oldFileName = item;
      const newFileName = `${index + 1}.${oldFileName.slice(oldFileName.indexOf('.') + 1)}`;

      // 设置旧文件门路和新文件门路
      const oldPath = `${filePath}/${oldFileName}`;
      const newPath = `${filePath}/${newFileName}`;

      // 判断文件格式
      const stat = fs.statSync(oldPath);

      // 判断是文件夹还是文件
      if (stat.isFile()) {fs.renameSync(oldPath, newPath); // 重命名文件
      } else if (stat.isDirectory()) {fs.renameSync(oldPath, newPath); // 重命名文件夹
        recursion(newPath, level + 1); // 递归文件夹
      }
    });
};

export const sortCatalog = (filePath: string): boolean => {
  // 绝对路径
  if (path.isAbsolute(filePath)) {recursion(filePath);
  } else { // 相对路径
    recursion(path.join(__dirname, filePath));
  }

  return true;
};

那么，Inquirer.js 接入就搞定了，试试咱们的 npm run jsliang，能够失常应用！

前面能够欢快写性能啦~

五 参考文献

  • GitHub：SBoudrias/Inquirer.js
  • GitHub：rxjs
  • RxJS 中文文档
  • CSDN：inquirer.js —— 一个用户与命令行交互的工具

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

正文完
前端
发表至： 前端
2021-06-16
 0
关于前端:深入理解JavaScript闭包之什么是闭包
关于前端:浅谈对JavaScript-中的执行上下文和执行栈的理解
关于前端:前端里那些你不知道的事儿之-windowonload
关于前端:Cookie的SameSite属性