Introduction to the

There are various scaffolding tools on the front end, such as vue-CLI, create-React-app, etc. For our front-end early engineering development, bring great convenience.

So convenient node CLI, do you want to know how to develop? Next, I’ll show you how to develop a scaffold tool.

Lesson plans

This series will be divided into three sections: upper, middle and lower

  • (1) : Mainly introduces the development of Node tools, the need for common tool libraries.
  • Create a Node tool like create-react-app. Use this tool to create basic react programming structures.
  • (2) : How to publish your own private package to NPMJS.

Now let’s start the first section.

What functions does a common CLI tool implement? Take a look at our property commands: let’s take NPM init, NPM install as an example:

  • Init is a command. To create a package.json file.
  • After the init command is executed, you are asked to enter configuration information such as “package name:”, “author”, etc.
  • Finally, there Is a confirmation message: “Is this OK(yes)”
  • Alternatively, I can add some parameters, such as NPM init-y, so that the creation process uses the default configuration.
  • When using NPM Install to install the package, you can also see a progress bar and a simple loading animation
  • Finally, you can see that some of the information in the console is highlighted, such as red, green, bold, etc.

Now let’s go through what we need to do. What are the weapons we can use?

Common tool libraries

  • commander
  • inquirer
  • ora
  • chalk
  • which

commander

The node command line interface is a tool kit that makes the command line interface easier to use.

Installation:

npm install commander -D
Copy the code

If you enter -v or –version, the CLI version is better.

const program = require('commander');

// Output when processing -v, --version.
program.version(require('.. /package.json').version, '-v, --version');

// Parse the input parameters. Remember to put it at the end.
program.parse(process.argv); 
Copy the code

Creating a command

  • The command is create
  • Create a new project.
  • One parameter, name, is supported to indicate the project name.
const program = require('commander');
program
  .version(require('.. /package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name= > {
    console.log(name);
  })

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

If no parameter is provided after the create command is executed, a message is displayed indicating that the parameter name. Once provided, the console prints the name value we provided.

inquirer

It is easy to complete user and command line interaction. For example, NPM init requires us to enter package name, author, etc. Finally, we need to type yes to confirm and so on.

Specific usage, based on the code above. We added interaction with the command line. Enter an author information and final confirmation.

#! /usr/bin/env node

const program = require('commander');
const inquirer = require('inquirer');

program
  .version(require('.. /package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name= > {
    inquirer.prompt([
      // Input type
      {
        type: 'input'.name: 'author'.message: 'Please input the author name.'
      },
      // Confirm the type.
      {
        type: 'confirm'.name: 'continune'.message: 'Is that ok? '
      }
    ]).then(result= > {
      // Output: {author, continune} the actual value.
      console.log(result);
    })
  })

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

ora

Output the progress bar and loading information

const p = ora('Creating... ')
p.start();
setTimeout((a)= > {
  p.stop();
}, 3000);
Copy the code

The console, | has been turn, stop after 3 s.

chalk

Used to output different styles of information in the console. Such as text color, text background and so on.

const chalk = require('chalk')
console.log(chalk.red('some error'))
Copy the code

which

The PATH environment variable is used to find the executable file in the PATH, so the basic function is to find the executable. For example, find out if NPM is installed.

const which = require('which');
const chalk = require('chalk');

// Find the command used to install dependency packages in the system
function findNpm() {
  const npms = ['tnpm'.'cnpm'.'npm'];
  for (let i = 0; i < npms.length; i++) {
    try {
      // Find the first instance of the executable specified under the environment variable
      which.sync(npms[i]);
      return npms[i]
    } catch (e) {
    }
  }
  throw new Error(chalk.red('Please install NPM'));
}
Copy the code

A complete code:

Bin/cli files

#! /usr/bin/env node

const program = require('commander');
const inquirer = require('inquirer');
const chalk = require('chalk');
const ora = require('ora');

program
  .version(require('.. /package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name= > {
    console.log(name);

    inquirer.prompt([
      {
        type: 'input'.name: 'author'.message: 'Please input the author name.'
      },
      {
        type: 'confirm'.name: 'continune'.message: 'Is that ok? '
      }
    ]).then(result= > {
      console.log(result);
      console.log(chalk.red('some error'))

      const p = ora('Creating... ')
      p.start();
      setTimeout((a)= > {
        p.stop();
      }, 3000);
    })
  })

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

Package. The json file

{
  "name": "cli-demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "xcli": "./bin/cli"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "chalk": "^" 2.4.2."commander": "^ 3.0.1." "."download-git-repo": "^ 2.0.0." "."inquirer": "^ 7.0.0." "."ora": "^ 3.4.0"."which": "^ 1.3.1." "}}Copy the code

Project code

code

Install the command line under node_module

// Go to project folder NPM linkCopy the code

After successful installation, the. Xcli tool can be used anywhere.

xcli create xxx
Copy the code

With these weapons, it is very easy to develop a Node command. Full use of these tools. You can check out the official instructions on Github.

Next, we will use these tools to develop an actual tool. Create-react-app allows you to create basic react programming structures.

Create Scaffold tool for Node (middle)