写这个工具的灵感以及场景源于youtube的一次闲聊
原本我们写博客展示 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 #自动创建文件,存在默认覆盖
涉及的技术栈,以及技术选型
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
保持底部,最后随便找一个类似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
合并多个 管道
重定向为一个终端进行查看呢?1.0
不够好,也就能个人blog
站点用用,分享给别人瞧瞧,我打算下一步2.0
发表到我即将完成的 目前技术栈比较主流的 bbs
new-bee 上, 顺便推广一波,当然顺便点个 star支持一下也很感激,当然这也是我首次提及此项目,此项目涉及到docker
webpack
vue
spring-boot
shell 脚本
各种中间件
各种前沿 ui 库脚手架
未来甚至可能尝试基于docker
的微服务小型实践,总之想做的事情真的很多。
flag
,不过都会还回来的🤓全栈工程师的自我修养
或者大方向可以说web 全栈工程师的自我修养
和需要掌握的技术栈
,也是分享我这么多年的积累这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.