preface

In the cli development project, we used some easy tools, which greatly improved our development efficiency.

In this article, I’ll introduce you to some of these useful tools.

Note: All the examples below use the Macos environment as an example

The preparatory work

  • Let’s create a new empty project, and then open the command line to enter the project
  • performnpm initThe project initialization is complete
  • We should have one in the project at this pointpackage.jsonFile to add to the filebinConfiguration, as shown in the following figure

  • Among them,write-cliIs the name of the CLI tool, and its value is the file entry
  • The editorindex.js, as follows:

The first line here is very important!!

The first line here is very important!!

The first line here is very important!!

Specifies the operating environment

We then install it locally via NPM link, and then run write-CLI to see how it works

commander

introduce

Commander is a complete solution to nodeJS command line operations, providing users with command line input and parameter parsing.

The installation

npm install commander
Copy the code

Basic usage

const { Command } = require('commander');
const program = new Command()
program.version(require('./package').version, '-v, --version')
program.parse();
Copy the code

When you get this message, you know the basic usage of COMMANDER

The Create turned out to be so simple

Creating a project using Vue CLI or create-react-app

Some explanations:

  • We’re through.command()Class configurationcreateCommand. The first argument is the command name. The command argument follows the name
  • Angle brackets indicate that arguments are optional (square brackets are optional)
  • descriptionIs the description of the command
  • actionProcess sub-commands

The code implementation of the create will be explained in more detail in a later section

inquirer

Some command line interaction is inevitable when we use the CLI.

Some user interaction occurred in the use of the two excellent scaffolding mentioned above and in our NPM init.

So to use this interaction in our CLI project, we had to introduce the Inquirer.

The installation

npm install inquirer
Copy the code

Common use

Let’s use varlet-CLI as an example to implement selective interaction

So let’s rewrite create

const create = () = >{
  inquirer.prompt([
    {
        name: 'Please select your component library programming style'.type: 'list'.choices: ['sfc'.'tsx'],},])}Copy the code

Run write-cli create Hello again, you are sure to run the same interface as the picture.

See here, I believe there are friends will have a new question, how to capture the user’s input or selection.

No hurry. Let’s take our time and look down

inquirer.prompt([
  {
    name: 'Please input some text'.type: 'input' // For user input}])Copy the code

And then we get from the official documentation

inquirer.prompt(questions, answers) -> promise

As you can see, the user’s input is returned as a promise

So we use async await to receive input from the user

And so we’re done capturing

chalk

We can use Chalk to make our command line colorful.

The installation

npm install chalk 
Copy the code

In this article we use version 4.1.2 for demonstration purposes

Simple to use

Let’s take a few chestnuts 🌰

const log = console.log;

log(chalk.magenta('Hello') + ' Varlet' + chalk.red('! '));

log(chalk.blue.bgYellow.bold('Hello Varlet! '));

log(chalk.green('Hello'.'Varlet! '.'Jokerrr'.'bar'.'biz'.'baz'));
Copy the code

On the CLI, we will separate different prompt messages with different colors for output.

The last

These are some of the libraries we use, and there are some equally useful libraries that I will continue to introduce in Advanced: Useful Tools part 2. Stay tuned.

Reference documentation commander, the inquirer, chalk,