20分钟掌握前端编写 CLI 工具
什么是CLI
CLI(command-line interface 命令行界面)是指在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)。
- 典型的CLI界面:
GUI(Graphical User Interface 图形用户界面)是指采用图形方式显示的计算机操作用户界面。
- 典型的GUI界面:
Why CLI?
自古软件设计这个武林有两大流派,其中有一个是”CLI“,另外一个是”GUI“。它们一个为了普渡众生,一个为了提高内力,虽然在GUI出现之前,CLI独步武林。但是随着科技的发展,GUI后发致人很快就一统江湖。但是现在谁是天下第一已经不重要了,重点是如何学会用这两种武术提高自己,在合适的情况下用合适的解决方法。下面是我的理解:
作为互联网深度沉迷患者,很多体验是离不开GUI软件的,比如工作邮件,使用foxmail的GUI界面,我可能只需要点几下鼠标敲几下键盘就可以完成一次工作汇报。
但是作为前端资深复制粘贴工程师,也同样离不开CLI工具,在一个项目完成后,我用配置好的自动化软件(比如gulp),我只需要敲一个命令就可以完成上线前的准备。
到这里各位看官应该懂了,
- CLI更节省计算机资源,提高生产效率。因为不需要处理图形界面,所以开发成本低。适合面对各种geek向的码农。
- GUI用户学习成本更低,体验更好,生产效率相对较低。开发成本高。适合面对普通互联网用户。
在这里不得不提一下,之前做的基于nw.js的页面检查工具,虽然很厉害,但是启动太慢了加上界面交互浪费了太多精力没有抓住用户的“刚”,所以从效果来说并不是特别好:(
到这里,如果你依旧对前端如何构建一个CLI感兴趣,请跟我一起,10分钟打造一个基于nodejs的CLI工具吧。
在完成一个命令行工具之后,javascript这种浏览器语言,终于完成全产业链(从浏览器到桌面软件再到CMD工具)的试练,成为了武林之巅,也就是世界上最好的语言 :)
开始动手
- 配置环境
这次我们是基于nodejs来实现一个CLI工具,nodejs环境根据官网的文档一步步说明就好,NPM在公司内部需要配置代理。
首先如需要设全局代理:
set http_proxy= http://dev-proxy.oa.com:8080
NPM需要设置:
npm config set proxy http://dev-proxy.oa.com:8080
- 初始化项目配置文件 package.json
进入开发目录,执行
npm init
将会创建 package.json和默认的配置。当然手动创建也没有问题。
具体配置说明 传送门>
- 创建和配置主入口文件
在package.js文件中,需要新增
"bin": {"node-cli": "bin/index.js"}
其中node-cli
是需要执行的命令名,bin/index.js
是命令所调用的文件
调试
到此,准备工作已经完成了,接下来我们在index.js文件中写入console.log('my first cli');
打开命令行工具,进入当前当前开发文件夹,输入
bin/index.js
则会输出my first cli
。
但是这样有些麻烦,我们如何像发布后一样,直接输node-cli
命令就可以调用我们的主文件呢?
我们需要在开发目录执行
npm link
就可在目前的全局环境中创建node-cli
命令,成功以后,你就可以在本机任何目录执行node-cli
。
一些包推荐
在开发命令行过程中,我们会碰到各种问题,比如fs模块的pomise化、用户命令的复杂交互、友好的版本升级提示等等。利用npm当中的成熟库会是一个好方法,推荐几个库.通用CLI构建
看了这么多,也许有点迷糊?基于上面的步骤,有一个通用的CLI项目目录,集成了几个推荐的包,在clone之后迅速开始一个CLI工具的构建:
传送门 >
看个成品
前一段时间做了一个TG-CLI工具,大家在实现自己的CLI工具时,可拿来参考。
主要用来搭建互娱网站系统内的PC和移动专题,并根据用户输入配置页面内的基本元素,如注释、SEO信息、上报代码,并根据配置自动配置gulp,实现自动压缩、分离、补全SEO信息等。
主要有这些功能:
- 用户自主配置参数
- 生成规范化目录结构
- 自动生成配置文件
- 命令包装
- 版本检查
- …
使用预览:
传送门:TG-CLI
在实际编写过一个CLI工具之后,我觉得除了让电脑爆炸的功能以外,什么都能实现 :)
大家多多交流:)
20分钟掌握前端编写 CLI 工具相关推荐
- 2018年20种最佳前端Web开发工具
有许多前端开发工具可以加速Web开发.以下是包含主要功能和下载链接的顶级工具的精选列表. 1)Npm: Npm是JavaScript的Node包管理器.它有助于发现可重用代码的包并以强大的新方式组装它 ...
- 抖音Android校招面试题,抖音前端校招一面1小时20分钟
20200831 抖音前端校招一面视频1小时20分钟 (我人傻了!!!!!!) 1.看你在重构一个项目,你讲讲你重构的心得?你如何保证你重构后的功能逻辑是完整的?你如何让以后来维护你重构的代码的人能清 ...
- 2019年20种程序员必备前端Web开发工具
许多前端开发工具可以加速Web开发.以下是包含主要功能和下载链接的顶级工具的精选列表. 1)Npm: Npm是JavaScript的Node包管理器.它有助于发现可重用代码的包并以强大的新方式组装它们 ...
- 2020 前端必看 20个最好的 前端 Web开发工具
引言 市面上有许多前端开发工具可以加速 Web 开发工作.本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接. 1. Novi Builder Novi ...
- 【java工具类】-计算距离现在日期是否超过20分钟
目录 主要是针对字符串的处理的工具类: 判断list中是否模糊包含某个字段 判断当前日期和参数日期相隔时间是否超过20分钟 主要是针对字符串的处理的工具类: 字符串主要是转化为时间日期格式 判断lis ...
- 前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
- 20分钟,使用Amazon SageMaker快速搭建属于自己的AIGC应用
真火! 作为最近一段时间人工智能领域内的顶流之一,AIGC(AI-Generated Content)早已火爆出圈,频登各大互联网平台热搜. cite: 微软亚洲研究院官方微博 这段时间以来,基于深度 ...
- add-apt-repository:找不到命令_手把手教你使用nodejs编写cli(命令行)
手把手教你使用nodejs编写cli(命令行) 前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vue-cli,还有创建react项目的c ...
- 如何在 20 分钟内给你的 K8s PaaS 上线一个新功能?
作者 | 孙健波(天元) 来源|阿里巴巴云原生公众号 上个月,KubeVela 正式发布了, 作为一款简单易用且高度可扩展的应用管理平台与核心引擎,可以说是广大平台工程师用来构建自己的云原生 PaaS ...
最新文章
- HttpApplication事件ASP.NET页面周期
- ORB-SLAM2从理论到代码实现(四):相机成像原理、基本矩阵、本质矩阵、单应矩阵、三角测量详解
- mysql 5.6多实例_MySQL 5.6.x多实例配置
- 内存管理中的几种地址类型
- 信息论与编码_哈夫曼编码
- Redis学习笔记1-安装配置
- 8 list切片_Python中14个切片操作,你常用哪几个?
- 有什么好的Java自学教程视频,适合初学者
- Java编程程序异常处理方法
- 使用urllib2库实现有道翻译
- DataGridView控件机制及使用大全
- Codeforces Gym 100286I iSharp 模拟
- studio创建java工程_Android studio从头一步步创建Java项目
- python动态变量名以及调用_Python 动态变量名与调用介绍
- c# 全局钩子实现扫码枪获取信息。
- Bitvise ssh client工具
- go io 包的使用(TeeReader, MultiReader, MultiWriter, Pipe)
- Python:peewee常用操作CRUD
- 1367 二叉树中的列表(递归)
- 郭炜-C语言程序设计-程序设计与算法(一)-第一周