使用typescript快速开发一个cli的实现示例


Posted in Javascript onDecember 09, 2020

cli 的全称 command-line interface(命令行界面),也就是前端同学常用的脚手架,比如 yo、vue cli、react cli 等。

cli 可以方便我们快速创建项目,下图是引用 vue cli 的介绍:

使用typescript快速开发一个cli的实现示例

创建项目

运行下面的命令,创建一个项目:

npm init

执行命令完成后,可以看到项目根目录只有一个 package.json 文件。

使用typescript快速开发一个cli的实现示例

在 package.json 文件增加 bin 对象,并指定入口文件 dist/index.js。

在命令行运行需要在入口文件的第一行增加 #!/usr/bin/env node,告诉系统用 node 运行这个文件。

{
 "name": "cli-demo",
 "version": "0.0.1",
 "description": "cli demo",
 "keywords": [
 "cli"
 ],
 "bin": {
 "cli-demo": "dist/index.js"
 }
 ...
}

安装依赖

命令行工具,也会涉及到用户交互的动作,那么 node.js 是怎么实现呢?早有大佬提供了非常好的库,我们只要拿过来用,主要有两个库:

  • commander:完整的 node.js 命令行解决方案。
  • inquirer:交互式命令行工具。

将这两个库安装到项目里:

yarn add commander inquirer

由于是用 typescript 开发,再通过 rollup 打包,先安装相关的依赖库:

yarn add typescript rollup rollup-plugin-terser rollup-plugin-typescript2 @types/inquirer -D

配置

由于是用 typescript 开发,首先需要配置一下 tsconfig.json。

{
 "compilerOptions": {
 "target": "ES6",
 "module": "ESNext",
 "sourceMap": false,
 "declaration": false,
 "outDir": "./dist",
 "moduleResolution": "Node",
 "esModuleInterop": true,
 "resolveJsonModule": true,
 "removeComments": false,
 "importHelpers": true,
 "strict": true,
 "lib": ["ES6", "DOM"]
 },
 "include": ["src"]
}

接下来在根目录增加一个 rollup.config.js,把 typescript 代码编译成 javascript 代码。前面提到的要在第一行增加 #!/usr/bin/env node 来告诉系统用 node 运行,那么可以在 rollup.config.js 的 banner 选项,把 #!/usr/bin/env node 写在最前面。

import typescript from 'typescript'
import json from '@rollup/plugin-json'
import { terser } from 'rollup-plugin-terser'
import typescript2 from 'rollup-plugin-typescript2'

import { dependencies } from './package.json'

const external = Object.keys(dependencies || '')
const globals = external.reduce((prev, current) => {
 const newPrev = prev

 newPrev[current] = current
 return newPrev
}, {})

const defaultConfig = {
 input: './src/index.ts',
 output: {
 file: './dist/index.js',
 format: 'cjs',
 banner: '#!/usr/bin/env node',
 globals
 },
 external,
 plugins: [
 typescript2({
  exclude: 'node_modules/**',
  useTsconfigDeclarationDir: true,
  typescript,
  tsconfig: './tsconfig.json'
 }),
 json(),
 terser()
 ]
}

export default defaultConfig

实现一个简单的 cli

在根目录创建一个 src 文件夹,然后再创建一个 index.ts

添加引用

添加引用并实例化 Command 对象。

import { Command } from 'commander'
import pkg from '../package.json'

const program = new Command(pkg.name)

自定义命令

实现一个可交互的自定义命令,模拟在终端(命令行)的登录功能。使用 command 方法创建一个命令,description 可以用来描述这个命令的作用,登录处理逻辑则写在 action 方法里。最后使用 parse(process.argv) 方法,解析命令。更多详细介绍和使用,可移步:https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md。

program
 .command('login')
 .description('模拟登录。')
 .action(() => {
  handleLogin()
 })

program.parse(process.argv)

交互的话,用到前面说的 inquirer 库,接收输入的用户名和密码。选项的 type 的值有 inputpasswordnumbercheckboxeditorlistrawListexpandconfirm,选项 nameinquirer.prompt 方法返回的对象,选项 validate 可用来验证输入是否符合规则。更多详细介绍和使用,可移步:https://github.com/SBoudrias/Inquirer.js/blob/master/README.md

如果选项 typepassword,可通过 mask 设置掩码。

const handleLogin = () => {
 // 配置交互的用户名和密码
 const prompt = [
 {
  type: 'input',
  name: 'userName',
  message: '用户名:',
  validate: (value: string) => value.length > 0 || '用户名不能为空'
 },
 {
  type: 'password',
  name: 'password',
  message: '密码:',
  mask: '? ',
  validate: (value: string) => value.length > 0 || '密码不能为空'
 }
 ]

 inquirer.prompt(prompt).then(({ userName, password }) => {
 if (userName === 'demo' || password === '123456') {
  console.log('登录成功')
  return
 }
 console.log('用户名或密码错误')
 })
}

其他

一个 cli 工具,帮助信息也是必须的,可以通过 on('--help') 修改自定义帮助信息。

必须在 parse 方法之前。

program.on('--help', () => {
 console.log('\n运行 cli-demo -h | --help 查看命令使用。\n')
})

然后再来修改一下,没有输入任何参数的时候,会出现错误,可以使用 exitOverride 方法重新退出,在终端(命令行)输出帮助信息。

program.exitOverride()

try {
 program.parse(process.argv)
} catch (error) {
 program.outputHelp()
}

到这里,一个简单的 cli 工具完成了,先本地来测试下看看。在终端(命令行)输入 npm link,生成一个全局软连接,可以方便调试和测试。

使用typescript快速开发一个cli的实现示例

到此这篇关于使用typescript快速开发一个cli的实现示例的文章就介绍到这了,更多相关typescript开发cli内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
ES6中的类(Class)示例详解
Dec 09 #Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
如何利用find命令查找文件
2016/11/18 面试题
政治学专业毕业生求职信
2014/08/11 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
保外就医申请书范文
2015/08/06 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python