Cli工具集成到Electron客户端
给公司开发了一些小脚本,发布为了一个命令行工具
前端小伙伴反馈说,命令行要比客户端好用,因为只敲了很少的命令就完事了
但对于非前端开发者,Node 环境问题比较头疼,而且如果是非技术人员,可能命令行也无法接受
之前把单独一个功能复制粘贴再改改,集成到 electron
里去过,但工作量太大
最近又有了新思路之后,尝试了一番,花了大概俩小时,把之前的 cli 的大部分功能搬到了客户端上
核心思路就是:
原CLI须用Bun进行打包为二进制文件, electron中直接使用 child_process.spawn 执行, 监听输出信息返回到前端进行展示
前端中需要有一个配置文件 src/config.ts
, 来表示自己的 cli
有哪些 command
可以运行
就是这么一个简易的UI
目前仅可打包支持esm的包, 如sharp这种c++包还在研究中
安装bun
macos
curl -fsSL https://bun.sh/install | bash
wind
powershell -c "irm bun.sh/install.ps1 | iex"
打包到指定平台
具体请看官方文档: 支持的平台参数
RUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-darwin-arm64 --env inline --outfile z-cli
RUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-windows-x64 --env inline --outfile z-cli
RUNTIME_ENV
的用途是兼容 cli
里的一些和 electron
无关的代码
如检测 package.json
中信息, 打包后就不存在 package.json
了, 所以原项目中使用此环境变量过滤一下
把打包后的二进制文件放在此目录下
ipc.ts
以及 App.vue
中修改 z-cli
相关字符(binaryName/channel) 为 自己的cli名称
src/config.ts
修改为自己 cli 的命令配置
最终构建好的客户端, 包含一行命令的下拉栏, 以及一个执行结果
原本 cli
的配置文件等都会复用
相当于只是把 cli
的敲命令过程可视化, 把结果照搬到 electron
中
注意下 cli
里的依赖包,是否兼容 bun
如:
axios
需要替换成fetch
sharp
可能在构建成客户端后会报错 (待解决)