Electron 前端提测小工具

场景

目前公司的测试环境还是由开发来搭建和部署的。这种做法是极其不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。
先来预览一下工具-.-：

实施

本来是想做个在线版的工具的。但是和公司运维沟通蛋疼。测试服务器没网，让他们开个联网的权限bb个不停，还来个这是我该做的事情吗？我只能说我是前端开发，服务器有需求是我一个开发该做的事情吗？
好了，不抱怨，我前端啥都能玩，不就是没网，照样怼。
没网，我就做个离线版的工具呗。做个桌面应用不就好啦。

挖坑记录

虽然以前也没折腾过桌面应用什么的，但是不要怂，撸起袖子干。

调研选型技术

目前我了解到使用前端技术做桌面应用有 Electron 和 NW.js 以及 heX 着三种神器。具体选哪个呢，不纠结，看到
Electron 出自github，那自然首先考虑啦。

安装 Electron

作为一个懒人，首先想到的就是手脚架啦：

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

然后我们大概可以看到这样一个应用：

然后我们看到了这样的目录结构：

看下，我们熟悉的也就 index.html, main.js 和 renderer.js 这三个文件。都打开看看，然后再和本地跑起来的应用关联下，不难理解 main.js 就是用来创建我们应用视窗的。index.html 是用来展示应用主内容的。
既然是 html 和 js 那就撸起袖子干咯。

码字

注意看 renderer.js 的注释：

不需要多么高深的英语吧？说这个文件是被 index.html 引用的。这个文件还可以编写 nodejs 的代码。如此说来那不就 easy 了。
在此之前，已经挖了一个坑：

基于 vue-cli 的前端项目的自动发布预览环境 https://segmentfault.com/a/11...

既然可以写nodejs，那就直接把之前做的 nodejs 相关代码拿来用就好啦。

仍然是使用 ssh2 模块，链接服务器，然后调用之前编写的 shell 脚本，传入的参数稍作修改就好了。
好了，多说无用，来预览一下我们的小工具吧：

默认，dist.zip就是最新的要提测的包。如果这个包部署在测试环境出现问题，影响测试了，那么可以点击修改，然后输入我们开发提供一个回退版本的包名，然后点击发布测试环境等待构建完成就ok了。

嘿嘿，前端是不是无敌逆天了。开发完毕还没完，要给测试用，是不是要打包成一个 exe。

electron-packager 打包应用

安装：

npm install electron-packager -g

打包：

electron-packager . fe-tool --out ../electron

第一个参数是要打包的资源路径，这里我用的点代表当前路径下的资源。 第二个参数是要打包的文件名，最后一个参数是打包后输出在哪个文件夹下。

整理

作为一个穷鬼，也就在 windows 下折腾了一番。啥时候买个Mac，再来装一波啊。

更新于：2018年11月27日10:25:24 Mac已入手。蛮好用的哦。