🎉用Node.js开发一个Command Line Interface (CLI)

🎉用Node.js开发一个Command Line Interface (CLI)

Node.js用途很广,常用来开发服务、桌面应用等被开发者熟知,Node.js还有另外一个非常实用的场景 - 命令行应用(后文统称CLI)。本文将介绍CLI的开发流程、常用的功能,并以meet-cli为例实战演练,从零开始一步步开发一个可以在生产中使用(read world)的CLI工具。meet-cli现已开源,读者也可以直接下载查看。

Why CLI?

在深入开发之前,我们先了解几个问题。

CLI是什么?

Command Line Interface,顾名思义是一种通过命令行来交互的工具或者说应用。SPA应用中常用的如vue-cli, angular-cli, node.js开发搭建express-generator,orm框架sequelize-cli,还有我们最常用的webpack,npm等。他们是web开发者的辅助工具,旨在减少低级重复劳动,专注业务提高开发效率,规范develop workflow。

举比较典型的angular-cli 为例,读者可以查看它的npm说明文档,它可以让angular开发者快速创建最佳实践的angular应用,快速启动,快速创建component、directive、pipe、service、module等,用过的都说很好用,现在各个框架都有配套CLI。

CLI的根据不同业务场景有不同的功能,但万变不离其宗,本质都是通过命令行交互的方式在本地电脑运行代码,执行一些任务。

CLI有什么好处?

我们可以从工作中总结繁杂、有规律可循、或者简单重复劳动的工作用CLI来完成,只需一些命令,快速完成简单基础劳动。以下是我对现有工作中的可以用CLI工具实现的总结举例:

  1. 快速生成应用模板,如vue-cli等根据与开发者的一些交互式问答生成应用框架
  2. 创建module模板文件,如angular-cli,创建component,module;sequelize-cli 创建与mysql表映射的model等
  3. 服务启动,如ng serve
  4. eslint,代码校验,如vue,angular,基本都具备此功能
  5. 自动化测试 如vue,angular,基本都具备此功能
  6. 编译build,如vue,angular,基本都具备此功能
  7. *编译分析,利用webpack插件进行分析
  8. *git操作
  9. *生成的代码上传CDN
  10. *还可以是小工具用途的功能,如http请求api、图片压缩、生成雪碧图等等,只要你想做的都能做

总体而言就是一些快捷的操作替代人工重复劳动,提升开发效率。

与npm scripts的对比

npm scripts也可以实现开发工作流,通过在package.json 中的scripts对象上配置相关npm 命令,执行相关js来达到相同的目的;

但是cli工具与npm scripts相比有什么优势呢?

  1. npm scripts是某个具体项目的,只能在该项目内使用,cli可以是全局安装的,多个项目使用;
  2. 使用npm scripts 在业务工程里面嵌入工作流,耦合太高;使用cli 可以让业务代码工作流相关代码剥离,业务代码专注业务
  3. cli工具可以不断迭代开发,演进,沉淀。

meet-cli 针对项目实际需求,贴合工作实际需求应运而生。接下来看看meet-cli的一些功能;

MEET-CLI


本文基于

美柚的web开发的工作主要是产品内hybrid应用的 h5部分,以及广告、营销互动类的h5、往往互相独立,工作中发现有以下一些问题:

  • 每个h5的创建一些列目录和文件,每个h5都有公共的基础代码
  • 每次新功能都需要配置相关的npm watch和build命令,我们需要一个创建模板的功能
  • 各个工程之间都有一套自己的build代码,上传CDN的代码,各不相同,开发人员垮项目开发上手慢
  • 每次创建新工程build的代码都需要重复做一次(或者通过复制粘贴的办法),我们需要一个公共的上传功能

基于工作中的问题,额外我再加了点小功能,meet-cli诞生了,下面展示下他的一些功能;

1、meet -help查看功能列表


一个cli工具都具有查看帮助的功能,图中可以看出meet-cli具备创建module、编译、发布(git提交与资源上传cdn)、单独指定文件上传cdn功能、分析生成文件功能

接下来快速演示上述几个主要功能

2、meet init

meet init 会在工程根目录下生成meet.config.js 文件,用以配置meet工具的使用

const path = require('path');

module.exports = {

  // module 生成的目标目录
  modulePath: path.resolve('public'),

  // module template 目录
  moduleTemplatePath: path.resolve('meet/templates/module'),

  // project git url
  gitUrl:'http://gitlab.meiyou.com/advertise/ad-activity.git',

  // module build npm command
  npmBuildCommand:'npm run release:',

  // upload assets config
  upload:{

    // CDN Server
    server:'alioss',// 阿里OSS - 'alioss', 七牛云 - 'qn'

    // alioss server config
    config:{
      accessKeyId: "LTAIovxxxx0",
      accessKeySecret: "5xkXYxxxxf6wlzD8",
      bucket: "adstatic",
      region: "oss-cn-beijing",
      srcDir: path.resolve('public/assets'),// 要上传的dist文件夹
      ignoreDir: false,
      deduplication: true,
      prefix: "ad-activity.meiyou.com",
    }
  },

  // is publish after build?
  autoPublish: true,

  // 测试提交文字
};

3、meet new [module]

快速创建h5模块目录和基础文件,基础css,html,js,必要依赖,(还可以进行相关express路由配置,指定模块编译配置)


4、meet build [module]

build模块,生成代码,用webpack-bundle-analyzer 进行分析,可视化显示资源占比,可以一目了然的查看代码体积上是否存在问题,对于性能优化是一个好处



5、meet publish (git操作+upload CDN)

还有meet analysis 、meet upload 等功能都是上述功能的局部。meet upload 可以指定上传某个路径下的资源,作为上传工具单独而存在。

目前实用功能比较少,后面还会增加一些功能

上面这一波操作很酷, 那是怎么实现呢,我们的核心内容现在才登场,如何从零开始开发一个CLI呢?

从零开发CLI

我们将从零开始开发meet-cli来实战演示一个完整的cli的开发过程;(注:为了不影响我电脑的meet-cli,我将后文的cli demo命名为mei-cli ,大家见谅!)

基础模块

1、创建npm模块

执行命令,创建npm模块

npm init -y

得到


上面这步骤大家都很熟悉;

2、bin 入口文件

在package.json 文件增加bin的对象

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin":{
    "mei": "./bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

js 中首行设置如下代码:

#!/usr/bin/env node

上面这句话是用来告诉操作系统用node来运行这个文件

可以在js中console.log('hello mei')

3、全局安装

执行npm install -g ,将mei-cli安装到全局。so,最简单的cli诞生了,任意找个位置输入mei 命令,就执行了你的 ./bin/index.js文件,console.log了一句话,‘hello mei’。可以将mei-cli模块发布到npm上,这样就可以给社区使用了。如何发布npm模块,这里有一篇我的博客可以查看。

node.js 知识

node.js 具有filesystem模块,可以让开发者对文件进行读写、创建、删除等操作;

process、child_process、path、以及commonjs模块化知识等

基础掌握了,我们来认识一些常用组件😊

  • commander CLI常用开发框架
  • chalk 终端文字加颜色js组件
  • clui spinners、sparklines、progress bars图样显示组件
  • shelljs node.js运行shell命令组件
  • blessed-contrib 命令行可视化组件
  • lnquirer 命令行交互信息收集组件
  • figlet FIGlet is a program that creates large characters out of ordinary screen characters

此外,还有游大神开发的meet-ali-oss上传模块

上述这些组件足以让你开发酷炫的cli,如果不够,这里还有50个组件 任你挑选;

我们要完成的cli主体结构图


文件结构要划分合理,index.js是主入口文件, commands专门放主要的命令功能逻辑,根据命令模块划分,比较细的功能实现可以抽成组件放在lib文件夹中,剩余的配置,以及模板等放meet文件夹中

主入口文件

#!/usr/bin/env node
const path = require('path');
const fs = require('fs');
const program = require('commander');
const gmodule = require('../packages/commands/module');
// const serve = require('../packages/commands/serve');
const question = require('../packages/commands/question');
const build = require('../packages/commands/build');
const publish = require('../packages/commands/publish');
const upload = require('../packages/commands/upload');
const analysis = require('../packages/lib/analysis');
const initial = require('../packages/commands/initial');

let config = {};
// 配置文件如果存在则读取
if(fs.existsSync(path.resolve('meet.config.js'))){
    config = require(path.resolve('meet.config.js'));
}

program
    .version('1.0.0','-v, --version')
    .command('init')
    .description('initialize your meet config')
    .action(initial);

program
    .command('new [module]')
    .description('generator a new module')
    .action(function(module){
        gmodule(config,module)
    });

program
    .command('build [module]')
    .description('git build specify module and assets upload to CDN!')
    .action(function(module){
        build(config,module)
    });

program
    .command('publish')
    .description('upload assets to CDN and git commit && push')
    .action(function(){
        publish(config)
    });

program
    .command('upload')
    .description('upload your build dist files to CDN server')
    .action(function () {
        upload(config.upload);
    });

program
    .command('analysis')
    .description('analysis dist files size and percent')
    .action(function () {
        analysis(config.upload.config.srcDir);
    });

program
    .command('question')
    .description('analysis dist files size and percent')
    .action(function(){
        question()
    });

program.parse(process.argv);

主入口文件利用commander监测终端输入命令时,触发相应的模块运行。commander会自动生成mei -help的命令,该命令用来显示支持的命令。命令命名尽可能短、见名知意,不支持的命令有相关提示,运行错误有正确的提示和响应,是cli的最佳实践。

这里在主入口文件中读取了meet.config.js,把相应的的配置信息传递给对应模块。如把CDN上传的配置信息传给上传模块,把

用了commander发现这cli也没有什么技术含量😂。

meet new [module] 触发运行的js

const path = require('path');
const fs = require('fs');
const chalk = require('chalk');
const inquirer = require('inquirer');

// 要拷贝的目标所在路径
let templatePath;
// 目标文件夹根路径
let targetRootPath;

function deleteFolderRecursive (path) {
    if (fs.existsSync(path)) {
        fs.readdirSync(path).forEach(function(file, index){
            var curPath = path + "/" + file;
            if (fs.lstatSync(curPath).isDirectory()) {
                // recurse
                deleteFolderRecursive(curPath);
            } else { // delete file
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
};

function copyTemplates(name){
    function readAndCopyFile(parentPath,tempPath){
        let files = fs.readdirSync(parentPath);

        files.forEach((file)=>{
            let curPath = `${parentPath}/${file}`;
            let stat = fs.statSync(curPath);
            let filePath = `${targetRootPath}/${tempPath}/${file}`;
            if(stat.isDirectory()){
                fs.mkdirSync(filePath);
                readAndCopyFile(`${parentPath}/${file}`,`${tempPath}/${file}`);
            }
            else{
                const contents = fs.readFileSync(curPath,'utf8');
                fs.writeFileSync(filePath,contents, 'utf8');
            }

        });
    }

    readAndCopyFile(templatePath,name);
}

function generateModule(meetConfig,name){
    templatePath = typeof meetConfig.moduleTemplatePath !== 'undefined'? path.resolve(meetConfig.moduleTemplatePath):path.join(__dirname,'..','meet/module');
    targetRootPath = meetConfig.modulePath;
    let targetDir = path.join(targetRootPath,name);

    if(fs.existsSync(targetDir)){

        // 如果已存在改模块,提问开发者是否覆盖该模块
        inquirer.prompt([
            {
                name:'module-overwrite',
                type:'confirm',
                message:`Module named ${name} is already existed, are you sure to overwrite?`,
                validate: function(input){
                    if(input.lowerCase !== 'y' && input.lowerCase !== 'n' ){
                        return 'Please input y/n !'
                    }
                    else{
                        return true;
                    }
                }
            }
        ])
            .then(answers=>{
                console.log('answers',answers);

                // 如果确定覆盖
                if(answers['module-overwrite']){
                    // 删除文件夹
                    deleteFolderRecursive(targetDir);
                    console.log(chalk.yellow(`Module already existed , removing!`));

                    //创建新模块文件夹
                    fs.mkdirSync(targetDir);
                    copyTemplates(name);
                    console.log(chalk.green(`Generate new module "${name}" finished!`));
                }
            })
            .catch(err=>{
                console.log(chalk.red(err));
            })
    }
    else{
        //创建新模块文件夹
        fs.mkdirSync(targetDir);
        copyTemplates(name);
        console.log(chalk.green(`Generate new module "${name}" finished!`));
    }

}

module.exports = generateModule;

主要逻辑是根据用户配置的templatePath 与targetRootPath,遍历templatePath路径下的所有文件夹与文件,copy文件到targetRootPath,如果已经存在则提示是否覆盖。

上面说明templatePath 是一个灵活的路径,模板可以在mei-cli中,也可以在任何一个位置,只要指定了正确的路径,就能实现相同的结果。此功能可以使用任何web框架,任何web框架都可以准备他的module模板,它的作用就是把模板文件copy到指定位置,也就是一键生成模板。

看到这里,发现确实没什么技术含量。

meet publish

const chalk = require('chalk');
const inquirer = require('inquirer');
const shellHelper = require('../lib/shellHelper');
const upload = require('./upload');

let config = {
    autoPublish: false
};

function gitCommit(){
    // 发布,提示输入commit 信息
    inquirer.prompt([
        {
            name:'message',
            type:'input',
            message:`Enter your publish message \n `
        }
    ])
        .then(answers=>{
            let message = answers.message;
            shellHelper.series([
                'git pull',
                'git add .',
                `git commit -m "${message}"`,
                'git push',
            ], function(err){
                if(err){
                    console.log(chalk.red(err));
                    process.exit(0);
                }
                console.log(chalk.green('Git push finished!'));
                process.exit(0);
            });
        })
        .catch(err=>{
            console.log(chalk.red(err));
        });
}

function publish(meetConfig){
    Object.assign(config,meetConfig);
    upload(config.upload)
        .then(res=>{
            console.log(chalk.green('Upload To CDN finished!'));

            if(config.autoPublish === true){
                gitCommit();
            }
        })
        .catch(err=>{
            console.log(chalk.red(err));
        })
}

module.exports = publish;

meet publish 原理是利用node.js child_process顺序执行多个git命令进行git提交,利用meet-ali-oss进行资源文件上传。

剩下的还有build、initial、upload,analysis等功能,都是类似的,不再贴代码进行一一阐述了,读者可以下载meet-cli进行查看

git clone https://github.com/linweiwei123/meet-cli.git

除此之外,还可以放飞眼界,在你的cli中加入更多功能,比如进行与服务器进行通信(用axios http模块请求)、实时通信、分享CLI命令界面等等(有些很鸡肋),只要是符合实际需要的,大胆设想,大胆实现,让你的CLI无比强大。

功能逻辑见仁见智,开发者可以发挥个人的智慧开发适合自己的CLI。

CLI开发中还有一些地方需要开发者注意。

注意事项

  1. .gitignore,.npmignore 跟npm模块一样CLI也需要注意提交文件内容限制
  2. package.json 中注意dependencies与devDependencies的区别
  3. 良好的文档描述

到此meet-cli就开发完成了,还可以发布到npm上给社区使用(适合的话)。

未来计划

todolist

  • 增加图片处理命令 meet comp [path],用于压缩,生成webp
  • 生成gitignore文件命令
  • 生成eslint配置
  • multipages-generator合并,形成完整的h5开发工作流
  • 类似vue-cli 通过网页操作替代cli交互

总结

本文主要介绍了CLI的入门,常见的组件以及用法,常见的CLI功能。CLI是web开发的辅助工具,旨在提高web工作效率,希望本文能给大家的工作带来一些启迪与帮助😎!

文章被以下专栏收录

    关注前端前沿技术,探寻业界深邃思想。https://qianduan.group 欢迎微信/微博搜索『前端外刊评论』,关注我们。欢迎给本专栏投稿,原作译作不限,要求:质量高!如果愿意尝试从事前端技术相关的书籍的编写或翻译工作,请私信外刊君。