[{"data":1,"prerenderedAt":385},["ShallowReactive",2],{"page-/post/cli/cli-to-electron-readme":3,"surrounding-page":376},{"id":4,"title":5,"author":6,"body":7,"date":363,"description":364,"extension":365,"group":6,"lastmod":366,"meta":367,"navigation":368,"path":369,"rawbody":370,"seo":371,"showTitle":6,"stem":372,"tags":373,"versions":6,"__hash__":375},"content/post/CLI/cli-to-electron-readme.md","Cli工具集成到Electron客户端",null,{"type":8,"value":9,"toc":351},"minimark",[10,14,18,21,24,32,35,38,44,59,62,69,73,79,85,88,120,123,139,142,152,223,234,244,248,253,256,273,277,282,286,289,295,304,307,315,318,337,340,347],[11,12,13],"h2",{"id":13},"背景",[15,16,17],"p",{},"给公司开发了一些小脚本，发布为了一个命令行工具",[15,19,20],{},"前端小伙伴反馈说，命令行要比客户端好用，因为只敲了很少的命令就完事了",[15,22,23],{},"但对于非前端开发者，Node 环境问题比较头疼，而且如果是非技术人员，可能命令行也无法接受",[15,25,26,27,31],{},"之前把单独一个功能复制粘贴再改改，集成到 ",[28,29,30],"code",{},"electron"," 里去过，但工作量太大",[15,33,34],{},"最近又有了新思路之后，尝试了一番，花了大概俩小时，把之前的 cli 的大部分功能搬到了客户端上",[15,36,37],{},"核心思路就是：",[15,39,40],{},[41,42,43],"strong",{},"原CLI须用Bun进行打包为二进制文件, electron中直接使用 child_process.spawn 执行, 监听输出信息返回到前端进行展示",[15,45,46,47,50,51,54,55,58],{},"前端中需要有一个配置文件 ",[28,48,49],{},"src/config.ts",", 来表示自己的 ",[28,52,53],{},"cli"," 有哪些 ",[28,56,57],{},"command"," 可以运行",[15,60,61],{},"就是这么一个简易的UI",[15,63,64],{},[65,66],"img",{"alt":67,"src":68},"","https://img.zzao.club/article/202504101707557.png",[11,70,72],{"id":71},"cli打包","Cli打包",[74,75,76],"blockquote",{},[15,77,78],{},"目前仅可打包支持esm的包, 如sharp这种c++包还在研究中",[15,80,81,82],{},"安装",[28,83,84],{},"bun",[15,86,87],{},"macos",[89,90,94],"pre",{"className":91,"code":92,"language":93,"meta":67,"style":67},"language-shell shiki shiki-themes github-light","curl -fsSL https://bun.sh/install | bash\n","shell",[28,95,96],{"__ignoreMap":67},[97,98,101,105,109,113,117],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"s7eDp","curl",[97,106,108],{"class":107},"sYu0t"," -fsSL",[97,110,112],{"class":111},"sYBdl"," https://bun.sh/install",[97,114,116],{"class":115},"sD7c4"," |",[97,118,119],{"class":103}," bash\n",[15,121,122],{},"wind",[89,124,126],{"className":91,"code":125,"language":93,"meta":67,"style":67},"powershell -c \"irm bun.sh/install.ps1 | iex\"\n",[28,127,128],{"__ignoreMap":67},[97,129,130,133,136],{"class":99,"line":100},[97,131,132],{"class":103},"powershell",[97,134,135],{"class":107}," -c",[97,137,138],{"class":111}," \"irm bun.sh/install.ps1 | iex\"\n",[15,140,141],{},"打包到指定平台",[15,143,144,145],{},"具体请看官方文档: ",[146,147,151],"a",{"href":148,"rel":149},"https://bun.sh/docs/bundler/executables",[150],"nofollow","支持的平台参数",[89,153,155],{"className":91,"code":154,"language":93,"meta":67,"style":67},"RUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-darwin-arm64 --env inline  --outfile z-cli\nRUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-windows-x64 --env inline  --outfile z-cli\n",[28,156,157,195],{"__ignoreMap":67},[97,158,159,163,166,168,171,174,177,180,183,186,189,192],{"class":99,"line":100},[97,160,162],{"class":161},"sgsFI","RUNTIME_ENV",[97,164,165],{"class":115},"=",[97,167,30],{"class":111},[97,169,170],{"class":103}," bun",[97,172,173],{"class":111}," build",[97,175,176],{"class":111}," ./src/index.js",[97,178,179],{"class":107}," --compile",[97,181,182],{"class":107}," --target=bun-darwin-arm64",[97,184,185],{"class":107}," --env",[97,187,188],{"class":111}," inline",[97,190,191],{"class":107},"  --outfile",[97,193,194],{"class":111}," z-cli\n",[97,196,198,200,202,204,206,208,210,212,215,217,219,221],{"class":99,"line":197},2,[97,199,162],{"class":161},[97,201,165],{"class":115},[97,203,30],{"class":111},[97,205,170],{"class":103},[97,207,173],{"class":111},[97,209,176],{"class":111},[97,211,179],{"class":107},[97,213,214],{"class":107}," --target=bun-windows-x64",[97,216,185],{"class":107},[97,218,188],{"class":111},[97,220,191],{"class":107},[97,222,194],{"class":111},[15,224,225,227,228,230,231,233],{},[28,226,162],{}," 的用途是兼容 ",[28,229,53],{}," 里的一些和 ",[28,232,30],{}," 无关的代码",[15,235,236,237,240,241,243],{},"如检测 ",[28,238,239],{},"package.json"," 中信息, 打包后就不存在 ",[28,242,239],{}," 了, 所以原项目中使用此环境变量过滤一下",[11,245,247],{"id":246},"electron-配置","Electron 配置",[249,250,252],"h3",{"id":251},"resourcebin","resource/bin",[15,254,255],{},"把打包后的二进制文件放在此目录下",[15,257,258,261,262,265,266,269,270],{},[28,259,260],{},"ipc.ts"," 以及 ",[28,263,264],{},"App.vue"," 中修改 ",[28,267,268],{},"z-cli"," 相关字符(binaryName/channel) 为 ",[41,271,272],{},"自己的cli名称",[11,274,276],{"id":275},"vue-配置","Vue 配置",[15,278,279,281],{},[28,280,49],{}," 修改为自己 cli 的命令配置",[11,283,285],{"id":284},"打包调试","打包/调试",[15,287,288],{},"最终构建好的客户端, 包含一行命令的下拉栏, 以及一个执行结果",[15,290,291,292,294],{},"原本 ",[28,293,53],{}," 的配置文件等都会复用",[15,296,297,298,300,301,303],{},"相当于只是把 ",[28,299,53],{}," 的敲命令过程可视化, 把结果照搬到 ",[28,302,30],{}," 中",[11,305,306],{"id":306},"注意",[15,308,309,310,312,313],{},"注意下 ",[28,311,53],{}," 里的依赖包,是否兼容 ",[28,314,84],{},[15,316,317],{},"如:",[319,320,321,331],"ul",{},[322,323,324,327,328],"li",{},[28,325,326],{},"axios"," 需要替换成 ",[28,329,330],{},"fetch",[322,332,333,336],{},[28,334,335],{},"sharp"," 可能在构建成客户端后会报错 (待解决)",[11,338,339],{"id":339},"开源地址",[15,341,342],{},[146,343,346],{"href":344,"rel":345},"https://github.com/aatrooox/cli-to-electron",[150],"Github",[348,349,350],"style",{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}",{"title":67,"searchDepth":197,"depth":197,"links":352},[353,354,355,359,360,361,362],{"id":13,"depth":197,"text":13},{"id":71,"depth":197,"text":72},{"id":246,"depth":197,"text":247,"children":356},[357],{"id":251,"depth":358,"text":252},3,{"id":275,"depth":197,"text":276},{"id":284,"depth":197,"text":285},{"id":306,"depth":197,"text":306},{"id":339,"depth":197,"text":339},"2025-04-10T00:00:00.000Z","把基于JS/TS的命令行工具，转换为Electron客户端，无需重写代码，还能大大提升非开发者使用体验","md","2025-08-19T00:00:00.000Z",{},true,"/post/cli/cli-to-electron-readme","---\ntitle: Cli工具集成到Electron客户端\ndate: 2025-04-10\nlastmod: 2025-08-19\ntags: [\"Cli\"]\ndescription: 把基于JS/TS的命令行工具，转换为Electron客户端，无需重写代码，还能大大提升非开发者使用体验\n---\n## 背景\n\n给公司开发了一些小脚本，发布为了一个命令行工具\n\n前端小伙伴反馈说，命令行要比客户端好用，因为只敲了很少的命令就完事了\n\n但对于非前端开发者，Node 环境问题比较头疼，而且如果是非技术人员，可能命令行也无法接受\n\n之前把单独一个功能复制粘贴再改改，集成到 `electron` 里去过，但工作量太大\n\n最近又有了新思路之后，尝试了一番，花了大概俩小时，把之前的 cli 的大部分功能搬到了客户端上\n\n核心思路就是：\n\n**原CLI须用Bun进行打包为二进制文件, electron中直接使用 child_process.spawn 执行, 监听输出信息返回到前端进行展示** \n\n前端中需要有一个配置文件 `src/config.ts`, 来表示自己的 `cli` 有哪些 `command` 可以运行\n\n就是这么一个简易的UI\n\n![](https://img.zzao.club/article/202504101707557.png)\n\n## Cli打包\n\n> 目前仅可打包支持esm的包, 如sharp这种c++包还在研究中\n\n安装`bun`\n\nmacos\n```shell\ncurl -fsSL https://bun.sh/install | bash\n```\n\nwind\n```shell\npowershell -c \"irm bun.sh/install.ps1 | iex\"\n```\n\n打包到指定平台\n\n具体请看官方文档: [支持的平台参数](https://bun.sh/docs/bundler/executables)\n\n```shell\nRUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-darwin-arm64 --env inline  --outfile z-cli\nRUNTIME_ENV=electron bun build ./src/index.js --compile --target=bun-windows-x64 --env inline  --outfile z-cli\n```\n\n`RUNTIME_ENV` 的用途是兼容 `cli` 里的一些和 `electron` 无关的代码\n\n如检测 `package.json` 中信息, 打包后就不存在 `package.json` 了, 所以原项目中使用此环境变量过滤一下\n\n## Electron 配置\n\n### resource/bin\n\n把打包后的二进制文件放在此目录下\n\n`ipc.ts` 以及 `App.vue` 中修改 `z-cli` 相关字符(binaryName/channel) 为 **自己的cli名称**\n\n## Vue 配置\n\n`src/config.ts` 修改为自己 cli 的命令配置\n\n## 打包/调试\n\n最终构建好的客户端, 包含一行命令的下拉栏, 以及一个执行结果\n\n原本 `cli` 的配置文件等都会复用 \n\n相当于只是把 `cli` 的敲命令过程可视化, 把结果照搬到 `electron` 中\n\n## 注意\n\n注意下 `cli` 里的依赖包,是否兼容 `bun`\n\n如:\n- `axios` 需要替换成 `fetch`\n- `sharp` 可能在构建成客户端后会报错 (待解决)\n## 开源地址\n\n[Github](https://github.com/aatrooox/cli-to-electron)",{"title":5,"description":364},"post/CLI/cli-to-electron-readme",[374],"Cli","HQS2Uy6wUlRpoJbk-QBAQpE-twPwlL-Glpq3lHEhp5s",[377,381],{"title":378,"path":379,"stem":380},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":382,"path":383,"stem":384},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085854]