命令行工具(JS/TS)转换为客户端工具(Electron)

[gnakzz]

分享一个基于 JS 的 cli 转为 electron 的成本比较低的思路

背景

给公司使用 NodeJS 开发了一些小脚本(闲的)，发布为了一个命令行工具

前端小伙伴反馈说，命令行要比客户端好用，因为只敲了很少的命令就完事了

但对于非前端开发者，Node 环境问题比较头疼，而且如果是非技术人员，可能命令行也无法接受

之前把单独一个功能复制粘贴再改改，集成到 electron 里去过，但工作量太大

最近又有了新思路之后，尝试了一番，花了大概俩小时，把之前的 cli 的大部分功能搬到了客户端上

核心思路就是：

原 CLI 须用 Bun 进行打包为二进制文件, electron 中直接使用 child_process.spawn 执行, 监听输出信息返回到前端进行展示

前端中需要有一个配置文件 src/config.ts, 来表示自己的 cli 有哪些 command 可以运行

就是这么一个简易的 UI

开源地址 MIT

Github

觉得有需要的，可以自己 fork 源码修改，也欢迎找我交流

使用说明博客上有

缺点

Bun 对于 Node 的兼容程度会有影响。

比如我的 cli 里用到了 axios ，换成了原生 fetch ，当然，我当时只是为了偷懒，随手下载了一个 axios

再比如 sharp 这类依赖本地环境的 C++包需要特殊处理

今天花了俩小时成功搬到了 Electron 上，sharp 的问题后续会解决掉

有需要的自取吧

[luyinge]

Bun 打包的二进制有多大啊

[gnakzz]

@luyinge mac 56M win114.5 包含了 cli 里的 js 代码之后

[gnakzz]

@luyinge 但是再套到 electron 里，安装 app 后，要有个 400M 了

[marcong95]

之前我也想过弄一个类似的东西，不考虑用户可以设置多个命令行参数吗？

我自己的需求主要是使用 imagemagick 或者 ffmepg 的时候参数经常记不住

[gnakzz]

@marcong95 我这个不对 toC 的，是为了对内提升效率的一种方式吧。

另外参数是需要自己写一份的配置，前端根据配置信息渲染页面。

所以问题在于把所有的命令和参数罗列出来吧。 不过手写感觉也费不了多少时间

[SHF]

node sea
https://nodejs.org/api/single-executable-applications.html

[marcong95]

@gnakzz 我刚看了一下你的 config.ts ，好像不像是同时可以设定多个参数的样子。不过应该是你这个目的也只是运行自己写的脚本，没有很复杂的参数

[gnakzz]

@marcong95 #7 是的。同时设定多个参数，只是再把前端组合参数的方式改一下，支持多个就可以了

[gnakzz]

@SHF 不太想升到最新版，我目前大部分都是基于 20.x 。懒得再测试最新版。不如 bun 方便..

[gnakzz]

@marcong95 #7 config 是没啥问题的，只是前端组件改造一下，支持同时选多个参数，再组合起来用