Node series – 004 – Inquirer. Js

Thanks to the TypeScript environment and commander.js, we can now write directives in.ts files and run projects using NPM run XXX. However, there is a Bug with this approach:

• When there are too many instructions, we can’t remember them at all!

Therefore, an intelligent prompt is needed to simplify and visualize instructions.

One way jsliang wants to solve this problem is through the terminal type of question and answer form (may later arrange pages or Chrome plug-ins, etc.)

So, Here we go

First, install the necessary packages:

• The installationInquirer.js:npm i inquirer
• The installation@types/inquirer(Optional, TS is required) :npm i @types/inquirer -D

Then. We can start playing around with TypeScript and commander.js, and pick up index.ts and package.json to make a change:

src/index.ts

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

program
  .version('0.0.1')
  .description('Library of Tools')

program
  .command('jsliang')
  .description('Jsliang help instruction')
  .action(() = > {
    inquirer
    .prompt([
      { 
        type: 'rawlist'.name: 'question1'.message: A: May I help you? '.choices: ['Public Services'.'other']
      },
    ])
    .then((answers) = > {
      if (answers.question1 === 'Public Services') {
        inquirer.prompt([
          {
            type: 'rawlist'.name: 'question'.message: 'Current public services are:'.choices: ['File sort']
          }
        ]).then((answers) = > {
          if (answers.question === 'File sort') {
            inquirer.prompt([
              {
                type: 'input'.name: 'question'.message: 'Which folder do you want to sort? (Absolute path) '.default: 'D:/xx',
              }
            ]).then(async (answers) => {
              const result = await sortCatalog(answers.question);
              if (result) {
                console.log('Sort succeeded! ');
              }
            }).catch((error) = > {
              console.error('Wrong! ', error);
            });
          }
        }).catch((error) = > {
          console.error('Wrong! ', error);
        });
      } else if (answers === 'other') {
        // Do something else
      }
    }).catch((error) = > {
      console.error('Wrong! ', error);
    });
  });

program.parse(process.argv);
Copy the code

Notice that the sort has changed to jsliang.

package.json

{
  "name": "jsliang"."version": "1.0.0"."description": "Fe-util, Node Library"."main": "index.js"."scripts": {
    "jsliang": "ts-node ./src/index.ts jsliang"
  },
  "keywords": [
    "jsliang"."Node Tool Library"."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"}}Copy the code

And here’s the effect:

The same silky easy to use, but also can control the folder path ~

But! When you see the code above, do you feel like throwing up?

• Question1: ah, what is this? What function did you write in this code?
• Question2: It is disgusting that it is not supportedasync/await?

OK, let’s go through some of the operations in Inquirer.

In the above code, multiple questions can be passed through.prompt(Array

inquirer.prompt([
  { 
    type: 'input'.name: 'question'.message: A: May I help you? ',
  }
]).then((res) = > {
  console.log('success! ', res);
}).catch((err) = > {
  console.error('an error! ', err);
});
Copy the code

Where Object can be inserted:

• type: [String] Indicates the type of the prompt, defaultinput, includinginput,number,confirm,list,rawlist,expand,checkbox,password,editor
• name: [String] Stores the variable that answers the current question
• messageContent: [String | Function 】 the questions
• default: 【 String | Number | Boolean | Array | Function 】 the default values
• choices: 【 Array | Function 】 list option
• validate: [Function] Verify method, verify the input value is feasible, valid returntrueOtherwise, a string is returned indicating an error message (returnfalseIs the default error message.
• filter: [Function] Filter the answer and return the processed value
• transformer: [Function] display effect of operation answer
• when: 【 Function | Boolean 】 to accept the answer, according to the content in front of the judge whether need to show the problem
• pageSize: 【Number】 inlist,rawlist,expand,checkboxThis multiple options, paging split
• prefix: [String] Changes the default prefix
• suffix: [String] Changes the default suffix
• askAnswered: [Boolean] Specifies whether the existing answer is mandatory
• loop: “Boolean”listWhether you can scroll through the selection loop, defaulttrue

I’m sure you don’t understand, so let’s write down some possible use cases.

The subsequent code for shorthand, all written about the following code as shown, behind not shiver

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

program
  .version('0.0.1')
  .description('Library of Tools')

program
  .command('jsliang')
  .description('Jsliang help instruction')
  .action(() = > {
    inquirer
    .prompt([
      { 
        type: 'rawlist'.name: 'question'.message: A: May I help you? '.choices: ['Public Services'.'other']
      },
    ])
    .then((answers) = > {
      console.log('Answer:', answers);
    }).catch((error) = > {
      console.error('Wrong! ', error);
    });
  });

program.parse(process.argv);
Copy the code

Note: ① You can also find the following examples in inquires.js, but Jsliang wants to carry them into its own article for subsequent retrieval. ② If there is a comment about jsliang copying someone else’s README without seeing this comment, then Jsliang has nothing to say, just a few times, write a little comment

Enter text:

With parameters: type, name, message[, default, filter, validate, Transformer]

inquirer.prompt([
  { 
    type: 'input'.name: 'question'.message: 'the problem? '.default: 'liangjunrong',}]);Copy the code

Input numbers:

With parameters: type, name, message[, default, filter, validate, Transformer]

inquirer.prompt([
  { 
    type: 'number'.name: 'question'.message: 'the problem? '.default: '1',}]);Copy the code

Enter your password:

Available parameters:type, name, message, mask,[, default, filter, validate]

inquirer.prompt([
  { 
    type: 'password'.name: 'question'.message: 'the problem? ',}]);Copy the code

Radio option without subscript:

Optional parameters: type, name, message, choices[, default, filter, loop]

inquirer.prompt([
  { 
    type: 'list'.name: 'question'.message: 'the problem? '.default: 'jsliang'.choices: ['liangjunrong'.'jsliang']}]);Copy the code

Add separator:

inquirer.prompt([
  { 
    type: 'list'.name: 'question'.message: 'the problem? '.default: 'jsliang'.choices: [
      'liangjunrong'.new inquirer.Separator(), // Add a delimiter
      'jsliang',]}]);Copy the code

Radio option with subscript:

Optional parameters: type, name, message, choices[, default, filter, loop]

inquirer.prompt([
  { 
    type: 'rawlist'.name: 'question'.message: 'the problem? '.default: 'jsliang'.choices: ['liangjunrong'.'jsliang']}]);Copy the code

Optional parameters: type, name, message, choices[, filter, validate, default, loop]

inquirer.prompt([
  { 
    type: 'checkbox'.name: 'question'.message: 'the problem? '.choices: ['liangjunrong'.'jsliang']}]);Copy the code

Possible parameters: type, name, message, [default]

inquirer.prompt([
  { 
    type: 'confirm'.name: 'question'.message: 'the problem? ',}]);Copy the code

inquirer.prompt([
  { 
    type: 'input'.name: 'phone'.message: 'Please enter your mobile phone number'.validate: (val) = > {
      if (val.match(/\d{11}/g)) {
        return true;
      }
      return 'Please enter 11 digits'; }}]);Copy the code

Above we said 2 questions:

• Question1: ah, what is this? What function did you write in this code?
• Question2: It is disgusting that it is not supportedasync/await?

Now that we’ve solved problem 1 (which is supported by the inquires.js feature), let’s see how problem 2 works.

To solve this problem, we need to install rx.js, rx.js as recommended in inquires.js.

• Making: RXJS
• RxJS Chinese document

Start installation:

• The installationrxjs:npm i rxjs@5

The current version is V7.1.0, but after checking the Inquirer. Js example is v5.x, I can’t find the use of the new version, so I can only use this

Second jsliang is really lazy and doesn’t want to know what rx.js does, I just want the project to run in async/await mode

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

const prompts = new Rx.Subject();

// Ruthless information processor
inquirer.prompt(prompts).ui.process.subscribe((result) = > {
  console.log('Success:', result);
}, (error: unknown) = > {
  console.error('failure', error);
}, () = > {
  console.log('complete');
});

program
  .version('0.0.1')
  .description('Library of Tools')

program
  .command('jsliang')
  .description('Jsliang help instruction')
  .action(() = > {
    prompts.next({
      type: 'confirm'.name: 'question'.message: 'the problem? '}); prompts.complete(); }); program.parse(process.argv);Copy the code

This completes the encapsulation and makes it easier to process the information. (Imagine a bunch of switches behind it… case… Judgment)

However, unexpected problems occurred after inquire.js was plugged into multiple modules.

Multiple module examples

+ src
  - index.ts
  + base
    - config.ts
  + common
    - inquirer.ts
  + jsliang
    - inquirer.ts
Copy the code

You do not need to change the interface according to this directory. The following directory shall prevail

Personally, I suspect rx.js is a singleton thing

Error message:

• Making: SBoudrias/Inquirer. Js
• Making: RXJS
• RxJS Chinese document
• CSDN: Inquirer. Js – a tool for user interaction with the command line

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.