Node practical development of a mycli command line tool

This article will take you step by step to understand a node actual combat, and talk about how to make a mycli command line tool/scaffolding based on node. I hope it will be helpful to everyone!

Initialization

First make sure there is a node.js environment on your computer

Execute the following code on the command line to initialize a package.json file

npm init -y

At this time, an error will definitely be reported when the command line executes mycli.

Configure custom commands

package.json Add bin field, associated myclicommand

• Each command corresponds to an executable file

  "bin": {
    "mycli": "./test.js"
  },

• New/ test.jsFile

console.log("mycli命令执行成功");

• requires the install installation command, but the project has not yet been published to npm, so use npm link## for the time being. #Command, associate the mycli command to the global world.

At this point, if you execute the command line

mycli, no more errors will be reported.

Script configuration

test.js file:

console.log("mycli命令执行成功");

Then execute

mycli, an error pop-up window will appear

This is because when executing the

mycli command, it is equivalent to Let the computer execute this file, but the computer system cannot directly execute the js file. This requires us to add a configuration to the first line of the script code to specify the node.js## on the computer. #Program to execute this js script file. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>#!/usr/bin/env node</pre><div class="contentsignin">Copy after login</div></div>Due to changing the execution environment, you need to delete the previously linked files. The file location may be

C:\Program Files\nodejs\node_modules

. Find mycli and delete it. , and then execute npm link again. Now execute

mycli

on the console, and you can see that the console prints correctly.

Usage of related toolkits

Chalk
• Command line output colorful fonts
Ora
• The effect of loading is similar to the progress library
commander
• Design command
inquirer
• Interactive functions (such as: asking questions.. .)

Chalk

Install

• npm install chalk@4.1.2 -S

Use test. js

• const chalk = require("chalk");
  
  // chalk
  // const hello = chalk.red("hello");
  // const hello = chalk.blue.bgRed("hello");
  // const hello = chalk.blue.bgYellow("hello");
  const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
  console.log(hello);

##Ora

Installation

npm install ora@4.0.3 -S

Use test.js

const ora = require("ora");

// ora
const spinner = ora({
  text: "安装中..."
});
spinner.start();
setTimeout(() => {
  // spinner.stop();
  spinner.succeed("安装成功");
  // console.log("安装成功");
}, 2000)

Commonly used api

• start
  Start loading
  • stop
  Stop loading
  • succeed
  End loading with successful style

##commander

Commands commonly used in development, such as vue -V

git --version

vue Create and other commands, if you want to implement such commands, you need to use the commander library. The -V

--help

etc. after the command used can be understood as the parameters of the command. Then we need to obtain these parameters and judge by Different parameters are used to handle different events. In the node environment, you can get this parameter through

process.argv

. The commander library helps us encapsulate some methods without us having to judge the instructions carried by the user's input. Installation

npm install commander@8.2.0 -S

• Use

const commander = require("commander");
// ...
commander.parse(process.argv); // 放在后面

After the installation is completed,
• commander
will be automatically provided to us Some commands, such as

--help

, let’s test it below:

mycli --help

provides a method to set the version number

commander.version("1.0.0");

Execute
• mycli -V
You can see that the console prints the

1.0.0

version number. Custom command method

commander.option(command name, description, callback function)

Some of the functions written above are configured to the --init

command:

• commander.option("--init", "this is init", () => {
    // chalk
    // const hello = chalk.red("hello");
    // const hello = chalk.blue.bgRed("hello");
    // const hello = chalk.blue.bgYellow("hello");
    const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
    console.log(hello);
  
    // ora
    const spinner = ora({
      text: "安装中..."
    });
    spinner.start();
    setTimeout(() => {
      // spinner.stop();
      spinner.succeed("安装成功");
      // console.log("安装成功");
    }, 1000)
  })

  Now execute the mycli --init
test:

• 在指令中传递参数的写法

commander.option("--number <num>", "log a number", (num) => {
  console.log(num);
})

<参数名>表示必传的参数，[参数名]表示非必传的参数。控制台输入mycli --number 100回车，可以看到会输出100。

自定义命令方法

commander.command("create <projectName>").action((projectName)=>{
  console.log(projectName);
})

执行 mycli create xx 回车，控制台可以看到 输出了xx。

查看帮助

执行 mycli --help，可以看到我们刚才配置的指令和命令都出现在了帮助列表里。

inquirer

• 安装

npm install inquirer -S

• prompt提问的方法

  inquirer.prompt([
    {
      type: "input",
      name: "username",
      message: "请输入用户名："
    }
  ]).then((answer)=>{

  })

type表示问题的类型，取值可能是：input, number, password, editor等。

answer 是 {username: 输入的值}

• type是输入类型的 input

const inquirer = require("inquirer");

commander.command("add user").action(() => {
  inquirer.prompt([
    {
      type: "input",
      name: "username",
      message: "请输入用户名："
    }
  ]).then((answer) => {
    console.log(answer);
  })
})

• type是判断类型的 confirm

commander.command("testcon").action(() => {
  inquirer.prompt([
    {
      type: "confirm",
      name: "age",
      message: "是否大于18岁？"
    }
  ]).then((answer) => {
    console.log(answer);
  })
})

输入y或n来进行判断。

• type是单选类型 list

commander.command("testlist").action(() => {
  inquirer.prompt([
    {
      type: "list",
      name: "lib",
      message: "选择用到的框架：",
      choices: [
        "vue2",
        "vue3",
        "react",
        "svelte",
      ]
    }
  ]).then((answer) => {
    console.log(answer);
  })
})

执行 mycli testlist 命令：

下载模板

• download-git-repo是一个拉取代码的工具。

• 安装

npm install download-git-repo@3.0.2 -S

• 使用

const downgit = require("download-git-repo");

downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {
    console.log(err)
})

downgit方法里面的第一个参数理解为在github上面下载kongcodes用户的vue3-vant项目模板。第二个参数downUrl 为要将模板下载到什么目录下。第三个参数clone 是否要用git clone下载。第四个参数 为下载完成执行的一些事情。

• 结合command方法使用

commander.command("create <projectName>").action((projectName) => {
  const spinner = ora({
    text: "正在下载https://github.com/kongcodes/vue3-vant..."
  });
  spinner.start();
  fs.mkdirSync(`./${projectName}`);
  const downUrl = `${process.cwd()}\\${projectName}`;
  downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {
    if (err) throw err;
    spinner.stop();
    console.log(chalk.green("downgit success"));
  })
})

执行 mycli create pro 回车，会在当前目录下创建pro目录，下载vue3-vant模板到这个目录里。

代码地址

https://github.com/kongcodes/mycli

更多node相关知识，请访问：nodejs 教程！

The above is the detailed content of Node practical development of a mycli command line tool. For more information, please follow other related articles on the PHP Chinese website!