V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pkwenda
V2EX  ›  前端开发

如何用 node 开发自己的 cli 工具

  •  
  •   pkwenda ·
    pkwenda · 2018-08-09 01:28:43 +08:00 · 1523 次点击
    这是一个创建于 2303 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如何用 node 开发自己的 cli 工具

    灵感

    写这个工具的灵感以及场景源于youtube的一次闲聊

    使用场景

    原本我们写博客展示 shell,例如:安装运转 docker,一键部署脚本,等一些终端操作,我们需要进行大量的截图展示给用户,为什么不能更加直观方便的生成一个网页呢?

    如何使用

    • 安装
      sudo npm install share_shell -g
    
    • 帮助
      tw --help   #1.0 暂时用这个命令,没想到好的缩写
    

    tw --help

    • 查看版本
    tw --version || tw -v
    
    • 使用
     # tw share "要展示的命令" -p "路径"
     # 例如想 docker ps -a 秀一波你的 docker 容器
     tw share "docker ps -a" 或 tw s "docker ps -a"  # 默认生成 share_you_shell.html 到当前目录  
     
     # 还可以指定路径
     
     tw share "ls -all" -p /usr/local/html/share_shell.html  #自动创建文件,存在默认覆盖
    
    

    如何基于 node 制作自己的跨平台工具

    ① 制作前的思考

    • 涉及的技术栈,以及技术选型

    • shelljs 进行 CMD 处理

      首先我需要拿到`windows` 或 `linux` 的系统回调,使用 `linux` 中的 `sed -n 'p;n;p'` 获取输入任何命令的返回值在终端、那么首先考虑`shelljs API` 单发现 对于 `sed` 处理的很少,并不能满足我们的需求,但是看到了一个万能函数 ` shell.exec` ,我们用他的回调来接受我们的文本
      
    • fs 或 fs-extra

      fs-extra 对于 fs 的关系呢 就像是 lodashunderscore 前者封装了后者,并提供了更好的支持,并做到了向下兼容API 很不容易,我们主要用它生成一个简单的html文件来分享我们的shell

    • commander

      我们选用 commander 来制作 类似 git docker 风格的 cli 命令行工具 , 因为没有其他更好的选择

    • 其他

      我个人用了lodash string 进行了偷懒操作,缺点是增加了两个依赖,有点是快~

    ② 写代码前的准备工作

    • 初始化

      npm init 初始化生成标准的 package.json 文件,包含你的git信息,发布npm能找到你的描述,联系方式,版本号等。

    • 新建 bin 文件夹

      这是一个规范,可执行工具的老家。新建一个tw.js ,因为是打印机风格的,所以瞎起了个名字 取typeWriter首字母

    ③ 先定义一下基本的终端命令

    • 编辑 tw.js

      var program = require('commander');
      
      var appInfo = require('../package.json');
      
      program.version(appInfo.version) // 拿到 package.json 你定义的版本
      program
          .command('share <shell>') // 定义你的 command
      
          .alias('s') // 缩写
      
          .description('Enter the "shell" you want to convert and include it in \" \"  ') // 描述
      
          .option("-p, --path <path>", "Enter you html path , default ./share_you_shell.html") // option 字命令,可以无限多个
      
          .action(function (cmd, options) {
          // 拿到 cli 输入的 option 子命令,没有可以默认
              var path = typeof options.path == 'string' ? options.path : "./share_you_shell.html"
              // 执行你的操作 ↓
              // 执行 cli 的 command
              exec_shell.exec(cmd, (res) => {
                  // 回调的 res 根据格式转为数组
                  var res_arr = S(res).lines()
                  // 针对数组你的逻辑处理一波数组
                  let str = format.toTypedFormat([cmd].concat(res_arr))
                  // 异步制作你的文件,传入路径
                  file.mkfile(str, path)
              })
          }).on('--help', function () {
      
               // --help  commander 有默认处理,一般这部分无事可做,你还想干啥?
          });
      
      program.parse(process.argv);
      
      

    输入 tw -- help 大概是这样的

    tw --help

    • 完善代码

      完善一下你各单位的逻辑,当然你也可以选择写的更加优雅。

    • 预先注意的问题

      我这个项目我会预先想到:保留shell 的转译符 使用pre 原型输入 \n \t,处理一下 scroll 保持底部,最后随便找一个类似typewriterjs 开源库,按照他的风格生成一下就可以

    ④ 测试一下

    • 写完了?

      node /bin/tw.js share "tree -L 2" -p xxx 测试一下,(你们可能没有安装tree,换任何可执行的其他命令,长ping 除外)

    • 全局测一下

      我们最终是要发布到npm上的,可以让用户-g安装,自己应该先测试一下,

      首先:确保你在 package.json文件中添加了 bin 节点。并指明了主程序,像我这样。

          "bin": {
              "tw": "./bin/tw.js"
            },
      
    • 运行

      sudo npm install . -g

    • 执行

      tw share "tree -L 2" -p xxx/xxx/xx.html 如果生成了xx.html,恭喜你,可以发布了

    ④如何发布到npm进行装逼

    • 项目已经准备好了,接下来可以着手发布了。首先 npm 上注册账号,别忘了去邮箱验证。然后输入:

      npm adduser
      

    接下来会以问答的形式向你了解你的用户名、密码以及公开的邮箱,之后输入

    ```
    npm publish
    ```
    
    • 注意!! 发布npm 的源别是 cnpm 淘宝源,否则 401

    然后看到进度条走,之后组件发布成功,可以到npm上搜索自己的包了。

    npm install share_shell (取决于你package.json当时填写的项目名) 甚至你 cnpm install share_shell 也能下载,淘宝同步真他妈快。

    • npm i share_shell -g 全世界 所有 用户都可以下载了

    ⑤ 引发的思考

    • 思考 node既然为我们提供了如此简洁的方式,那么我们可以做一些更有意义的事情,比如 为我们的开源项目 做一个 部署发布打包测试CLI工具集,可以做一些日常工作的批处理 ,比如以前工作中的场景:多台服务器 负载均衡 查看后端日志是个麻烦事,需要开很多终端,我们可不可以配置好rsassh 合并多个 管道 重定向为一个终端进行查看呢?

    feature ( flag )

    • 做一个推荐

    1.0不够好,也就能个人blog站点用用,分享给别人瞧瞧,我打算下一步2.0发表到我即将完成的 目前技术栈比较主流的 bbs new-bee 上, 顺便推广一波,当然顺便点个 star支持一下也很感激,当然这也是我首次提及此项目,此项目涉及到docker webpack vue spring-boot shell 脚本 各种中间件 各种前沿 ui 库脚手架 未来甚至可能尝试基于docker的微服务小型实践,总之想做的事情真的很多。

    关于我

    庄文达:全栈开发攻城狮

    • 就是爱学习,我还要刺激大家一起学习🤓
    • 没事喜欢造造轮子🤓
    • 写写博客🤓
    • 录录视频分享🤓
    • 做一些技术实践🤓
    • 立一立flag,不过都会还回来的🤓
    • 目前在写 bbs🤓

    下一篇文章

    • 我会给大家讲述一下全栈工程师的自我修养或者大方向可以说web 全栈工程师的自我修养 和需要掌握的技术栈 ,也是分享我这么多年的积累

    最后展示一下新玩具吧

    下期见

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3234 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 13:01 · PVG 21:01 · LAX 05:01 · JFK 08:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.