脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → typescript开发cli

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

 更新时间：2020年12月09日 09:47:12   作者：Jason Long  
这篇文章主要介绍了使用typescript快速开发一个cli的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

创建项目

运行下面的命令，创建一个项目：

npm init

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

在 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 的值有 input、password、number、checkbox、editor、list、rawList、expand、confirm，选项 name 是 inquirer.prompt 方法返回的对象，选项 validate 可用来验证输入是否符合规则。更多详细介绍和使用，可移步：https://github.com/SBoudrias/Inquirer.js/blob/master/README.md

如果选项 type 是 password，可通过 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js对table的td进行相同内容合并示例详解

    js对table的td进行相同内容合并示例详解

    正如标题所言如何对table的td进行相同内容合并，下面为大家详细介绍下使用js是如何做到的，感兴趣的朋友不要错过
    2013-12-12
  • 中国象棋js代码,仅演示,未能真下

    中国象棋js代码,仅演示,未能真下

    2008-02-02
  • javascript 包裹节点 提高效率

    javascript 包裹节点 提高效率

    模仿jQuery，创建几个包裹节点的方法，发现jQuery的方法很低效啊，下一次他又可以说这几个方法可以提升了多少多少了。
    2010-02-02
  • 解决layui数据表格排序图标被超出的表头挤出去的问题

    解决layui数据表格排序图标被超出的表头挤出去的问题

    今天小编就为大家分享一篇解决layui数据表格排序图标被超出的表头挤出去的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js基于canvas实现时钟组件

    js基于canvas实现时钟组件

    这篇文章主要介绍了js基于canvas实现时钟组件的方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2021-02-02
  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    试想一下：出现了某个bug，有人用几分钟就搞定了，有人用了半天或者一天都找不到原因所在。你愿意当前者还是后者呢？想当前者的就请好好看完本篇文章吧。文中涉及较多Gif演示动画请注意。
    2016-07-07
  • bootstrap table 多选框分页保留示例代码

    bootstrap table 多选框分页保留示例代码

    在使用bootstrap table的复选框功能的时候，由于采用服务端分页，当在第一页选择了某些数据，然后点击第二页选择一些数据，再次点回第一页，发现原先选择的数据已经清空了，原来的多选框并不支持翻页保留多选数据，怎么解决呢，下面小编给大家分享下解决思路
    2017-03-03
  • 微信小程序中进行地图导航功能的实现方法

    微信小程序中进行地图导航功能的实现方法

    这篇文章主要介绍了微信小程序中进行地图导航功能的实现方法,需要的朋友可以参考下
    2018-06-06
  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结
    2010-12-12
  • js正则校验特殊的不可见字符的具体实现

    js正则校验特殊的不可见字符的具体实现

    用户可能从Excel或者其他地方直接复制粘贴,这时候提交到后端会导致获取的用户输入中包含一些特殊的不可见字符,本文主要介绍了js正则校验特殊的不可见字符的具体实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06

最新评论