文章目录加载中

Node.js 交互式命令行-交互验证

深入交互并且提供基于命令行的选择列表、弹框等 UI 视图,我们借助:inquirer 库。它的文档地址是:https://www.npmjs.com/package/inquirer

请看下面这段代码:

const inquirer = require("inquirer");
const program = require("commander");
program
    .version("1.0.0")
    .option("--sass [sass]", "启用sass")
    .option("--less", "启用less")
    .parse(process.argv);
program
    .command("module [moduleName]")
    .alias("m")
    .description("创建新模块")
    .action(option => {
        console.log(`option is ${option}`);
        console.log(`program.sass is ${program.sass}`);
        const config = {
            moduleName: null,
            des: "",
            sass: false,
            less: false
        };
        const promps = [];
        // type: input
        // 问答框类型
        if (config.moduleName !== "string") {
            promps.push({
                type: "input",
                name: "moduleName",
                message: "请输入模块名称",
                validate: function(input) {
                    if (!input) {
                        return "输入不能为空";
                    }
                    return true;
                }
            });
        }
        // type: list
        // 列表选择器类型
        if (!program.sass && !program.less) {
            promps.push({
                type: "list",
                name: "cssPretreatment",
                message: "想用什么css预处理器呢",
                choices: [
                    {
                        name: "Sass",
                        value: "sass"
                    },
                    {
                        name: "Less",
                        value: "less"
                    }
                ]
            });
        }
        inquirer.prompt(promps).then(function(answers) {
            console.log(answers);
        });
    });
program.parse(process.argv);

除去 commader 库的应用,inquirer 库的应用在 15~64 行。它首先会验证是否传入 module 参数,如果没有,那么以问答的形式引导用户输入;紧接着检查是否指定了 scss / less,如果没有指定,弹出列表选择器供用户选择。

整个过程中的交互体验还是非常好的,尤其是针对多个选项的时候的列表选择器,一目了然。

本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog
0