前端可视化平台

使用electron+node+react开发的前端可视化项目管理工具

开发起因

随着前端项目的开发,前端项目就会越来越多,比如小程序,pc端,移动端h5项目已经微前端的项目,公司的还有自己的,那么每次打开自己项目文件夹就会出现以下情况:

如上图所示,就会存在一下问题:

项目数量庞大,项目查找较麻烦项目启动繁琐,需要频繁切换到对应文件下进行运行无法快捷找到对应文件夹进行指令执行无法快速进行多个项目启动

​ 所以,我就想着能否开发出一个能够方便自己的开发工具,期望能做到以下功能

能够动态获取项目指令并批量执行能够动态管控和查询对应项目能够快捷打开项目和对应文件夹路径文件打包完成后将打包文件放入指定文件下最好能够支持浏览器插件进行对应功能调用

#技术选型

​ 由于项目启动和打包都是基于node环境,所以我最先选择的是node.js进行全局包工具开发(xl-order (opens new window)),设想为将多个指令保存并在调用时进行批量执行,比如我可以将

nginx -c /etc/nginx/nginx.conf && nginx -s reload

1

视为一个指令并为其规定一个调用别称,这样我可以通过调用别称直接进行对应代码的执行,减少每次都需要重复输入大量代码.

优点:

解决了每次都需要进入对应项目的痛点解决了多个指令执行时需要本人时常关注执行的问题部分解决了快捷启动对应项目等

缺点:

每次执行都需要打开一个cmd非可视化界面,交互局限较大无法快捷打开对应文件夹无法提供一些开发小工具等

结论:

​ 该工具较适合在服务器环境上进行操作,可对执行指令进行压缩,不需要多次输入冗余指令,如果大家觉得有兴趣可使用xl-order (opens new window),源码后续优化后就会放出

​ 随着node插件开完告一段落,我发现这个工具虽然能用,但局限还是太大

达不到我心里的预期,且页达不到浏览器插件调用功能的预期,所以我将目光看向了electron,electron提供了node环境+系统文件等功能+浏览器环境的功能,那么,以上的问题理论上就可以通过electron解决,而且浏览器插件调用本地功能也成为可能,原因是node本身是可以启动一个服务器端口,那么其他软件如果需要调用功能,只需调用对应接口即可.

​ 说干就干,随着我几个月的奋斗,前端可视化平台(WEBPCILVDS),和对应浏览器插件完成了第一版开发

#软件功能简述

​ 本软件提供可视化管理前端项目,提供指定执行项目指令执行额外执行指定逻辑,提供浏览器插件,支持通过浏览器插件进行软件项目管理模块的调用

并提供一些前端实用小工具,方便开发。

开源地址：
https://github.com/424490034/pci-docs