• 技术文章 >web前端 >js教程

    node实战之开发一个mycli命令行工具

    青灯夜游青灯夜游2022-06-06 19:42:04转载569
    本篇文章手把手带大家了解一个node实战,聊聊怎么基于node制作一个mycli命令行工具/脚手架,希望对大家有所帮助!

    初始化

    首先要确保电脑上有node.js的环境

    命令行执行下面代码,初始化一个package.json文件

    npm init -y

    此时,命令行执行mycli 肯定会报错。

    1.png

    配置自定义命令

    package.json 添加bin字段,关联mycli命令

      "bin": {
        "mycli": "./test.js"
      },
    console.log("mycli命令执行成功");

    此时命令行再执行 mycli就不会再报错。

    2.png

    脚本配置

    test.js文件:

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

    然后再执行 mycli,此时会出现一个提示错误的弹窗

    3.png

    这是因为,执行mycli命令的时候相当于让计算机执行了这个文件,而计算机系统是无法直接执行js文件的,这就需要我们在脚本代码第一行加入一个配置,指定计算机上的node.js程序来执行这个js脚本文件。

    #!/usr/bin/env node

    由于更改了执行环境,需要删除之前link到的文件,文件位置可能是C:\Program Files\nodejs\node_modules,找到mycli删除,然后再重新执行npm link

    现在控制台再来执行mycli,可以看到控制台正确打印。

    相关工具包的使用

    Chalk

    npm install chalk@4.1.2 -S
    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);

    4.png

    Ora

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

    5.gif

    commander

    开发中经常使用的命令,如vue -V git --version vue create等命令,想要实现这样的命令需要用到commander这个库。

    使用的命令后面带的-V --help 等,可以理解为是命令的参数,那么我们就需要获取到这些参数,通过判断参数的不同来处理不同的事件。

    那在node环境中,可以通过process.argv来获取到这个参数。而commander库,帮助我们封装好了一些方法,不用我们自己去判断用户输入携带的指令是什么。

    npm install commander@8.2.0 -S
    const commander = require("commander");
    // ...
    commander.parse(process.argv); // 放在后面

    安装完成之后,commander会自动提供给我们一些命令,如--help,下面来测试一下:

    mycli --help
    commander.version("1.0.0");

    执行 mycli -V可以看到控制台打印了 1.0.0版本号。

    自定义指令方法

    commander.option(指令名, 描述, 回调函数)

    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)
    })

    现在执行mycli --init测试:

    6.gif

    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,可以看到我们刚才配置的指令和命令都出现在了帮助列表里。

    7.png

    inquirer

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

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

    answer{username: 输入的值}

    const inquirer = require("inquirer");
    
    commander.command("add user").action(() => {
      inquirer.prompt([
        {
          type: "input",
          name: "username",
          message: "请输入用户名:"
        }
      ]).then((answer) => {
        console.log(answer);
      })
    })
    commander.command("testcon").action(() => {
      inquirer.prompt([
        {
          type: "confirm",
          name: "age",
          message: "是否大于18岁?"
        }
      ]).then((answer) => {
        console.log(answer);
      })
    })

    输入yn来进行判断。

    8.png

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

    执行 mycli testlist 命令:

    9.png

    下载模板

    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下载。第四个参数 为下载完成执行的一些事情。

    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 教程

    以上就是node实战之开发一个mycli命令行工具的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:nodejs Node.js node
    上一篇:浅析Angular中的模板引用变量 下一篇:JavaScript总结之18种常用数组方法
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 浅析nodejs项目中的package.json的常见配置属性• 浅谈Node第三方框架Express的使用方法• 深入了解Node的模块机制,聊聊模块实现流程• 浅析node中path路径模块的一些API• 详解node中如何安装多版本并进行切换• 【吐血总结】10个值得使用的热门Nodejs框架• 什么是异步资源?浅析Node实现异步资源上下文共享的方法
    1/1

    PHP中文网