原本我们写博客展示 shell, 例如: 安装运转 docker, 一键部署脚本, 等一些终端操作, 我们需要进行大量的截图展示给用户, 为什么不能更加直观方便的生成一个网页呢?
如何使用
安装
sudo npm install share_shell -g
复制代码
帮助
tw --help #1.0 暂时用这个命令, 没想到好的缩写
复制代码
查看版本
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 的关系呢 就像是 lodash 和 underscore 前者封装了后者, 并提供了更好的支持, 并做到了向下兼容 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 大概是这样的
完善代码
完善一下你各单位的逻辑, 当然你也可以选择写的更加优雅.
预先注意的问题
我这个项目我会预先想到: 保留 shell 的转译符 使用 pre 原型输入 \n \t, 处理一下 scroll 保持底部, 最后随便找一个类似 https://github.com/tameemsafi/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 工具集, 可以做一些日常工作的批处理 , 比如以前工作中的场景: 多台服务器 负载均衡 查看后端日志是个麻烦事, 需要开很多终端, 我们可不可以配置好 rsa 或 ssh 合并多个 管道 重定向为一个终端进行查看呢?
feature(flag)
做一个推荐
1.0 不够好, 也就能个人 blog 站点用用, 分享给别人瞧瞧, 我打算下一步 2.0 发表到我即将完成的 目前技术栈比较主流的 bbs https://github.com/pkwenda/new-bee 上, 顺便推广一波, 当然顺便点个 star https://github.com/pkwenda/new-bee 支持一下也很感激, 当然这也是我首次提及此项目, 此项目涉及到 docker webpack vue spring-boot shell 脚本 各种中间件
各种前沿 ui 库脚手架
未来甚至可能尝试基于 docker 的微服务小型实践, 总之想做的事情真的很多.
关于我
庄文达 https://github.com/pkwenda : 全栈开发攻城狮
就是爱学习, 我还要刺激大家一起学习
没事喜欢造造轮子
写写博客
录录视频分享
做一些技术实践
立一立 flag, 不过都会还回来的
目前在写 bbs https://github.com/pkwenda/new-bee
下一篇文章
我会给大家讲述一下
全栈工程师的自我修养
或者大方向可以说
web 全栈工程师的自我修养
和需要掌握的技术栈 , 也是分享我这么多年的积累
最后展示一下新玩具吧
下期见
来源: https://juejin.im/post/5b6b086cf265da0f8d368935