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

iFangcy_
3,581 阅读11分钟
原文链接： zhuanlan.zhihu.com

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工作效率，希望本文能给大家的工作带来一些启迪与帮助😎！

avatar
文章
阅读
粉丝