J.A.R.V.I.S诞生记

那一天我二十一岁，在我一辈子的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变整天上半明半暗的云，后来我才知道，生活就是个缓慢受锤的过程，人一每天老下去，奢望也一每天消逝，最后变得像挨了锤的牛同样。但是我过二十一岁生日时没有预见到这一点。我以为本身会永远生猛下去，什么也锤不了我。

前言

如今是凌晨一点，多是在夜里的时候人会变得比较感性，因此忽然想到了王小波在黄金时代中写下的这段话，没有理由的在这篇技术文章中将它做为引言。但愿你们在本身的黄金时代永远的生猛下去，什么也锤不了你。

书归正传，我们上回书说到在个人初版小程序发布系统被服务器拍倒在沙滩上后，我把目光从web转移到了app上，并准备使用Electron来构建一套app安装在电脑上用来解决服务器不支持部署小程序开发者工具的坑，接下来我将这次开发过程的思考和问题进行总结，从多个角度来介绍本项目。

J.A.R.V.I.S是作什么的？

它是一个安装在Mac或Windows上的app程序，能够随时从Git上拉取最新代码选取分支和tag并自动打包构建不一样环境上传至小程序后台的发布系统。

为何叫J.A.R.V.I.S？

老贾是唐尼的智能管家，项目启动的时候正值复联四热映，主要是为了记念一下唐尼吧，在星期五和Jarvis两个名字中犹豫了很久，最后仍是以为Jarvis比较酷一点，嗯，就是这么随意。

设计思路

工做原理

electron本质上就是一个将web打包成桌面应用的 Node. js 的变体，在开启app的同时就会启动一个node服务，经过node能够实现不少前端没法实现的事情，一个发布系统整个流程都是千篇一概的，无非就是拉代码、拉分支、切分支、构建开发包、上传后台。其中拉代码、切分支、构建这种平时在命令行内进行的操做，能够将它交给nodeJs提供的child-process衍生子进程的功能进行不一样目录下的shell脚本执行，最关键的上传则须要经过node请求微信开发中工具提供的api为渲染层提供上传接口进行相应操做。最后将electron项目打包为app，分别装在开发者的电脑上就能够实现一个基础版的小程序上传系统。

工做流程

配置

第一次使用须要先进行基础配置，将本机用户名、项目地址、开发者昵称一并保存到本地Stroage，为后续操做提供基础信息。保存的同时将项目拉取到本地的Applications目录中并新建一个jarvis目录，此目录用来保存之后全部须要构建的小程序项目，此时jarvis目录做为一个黑盒子，全部的信息都是从git拉下来的最新提交，与本地项目的开发代码会造成隔离，你的本地任何代码改动操做都不会影响到盒子内项目的信息，除非你进行了commit。

打包构建

切换分支

配置完基础信息后调用gitlabApi拉取该项目的分支和tag信息，渲染到下拉列表选择切换本地分支，同时在面板展现分支的基础信息，项目名称、当前分支名称、提交时间、提交描述、提交成员、提交id......

项目编译

接下来须要填写本次上传的版本号和版本描述并选择打包环境，而后进行项目构建。这里选择环境选择的是须要打包项目的根目录中的构建命令，好比个人小程序项目使用gulp构建，gulpfile中定义了四种打包命令，那么在点击开始项目构建后，程序会自动切换到黑盒中的项目根目录下执行对应命令并打包为dist文件。

上传

打包完以后的文件经过微信官方提供的http调用接口，先获取到开发者工具在本地的端口号文件，经过调用upload的api拼接端口号、项目路径、描述、版本号进行上传。上传成功后在面板上展现上传信息和上传状态而且经过钉钉群同步推送上传消息，包含发布版本、描述、发布人，最后在微信公众平台选择设置体验版。到此，一个完整的编译打包上传流程所有完成。

谈谈基础架构

总体使用vue-electron框架，分为五个大模块

• dist——src的输出目录
• src--开发目录
• static——静态资源文件目录
• build——打包文件目录
• .electron-vue——webpack配置目录

.electron-vue——webpack配置目录

此目录下保存着不一样的webpack配置文件，使用vue-loader、babel-loader、url-loader、vue-html-loader、post-css等插件使项目成为支持解析.vue文件，可以使用高级js语法的现代化工程，而且会将开发目录打包为标准的electron项目。

dist electron输出目录

经过webpack将项目打包为一个electron的标准项目，输出到dist目录下，package.json将会以此目录下的mian.js做为入口文件进行运行。

src——开发目录

src做为核心内容，包含三大部分main（electron主进程文件目录）、render（前端渲染层页面——vue+element）、service（后端提供服务接口——express）。

main做为一个桥梁的存在，连接着渲染层和服务端进程。其中service-main.js做为service中express的的启动文件导出，并在main/index.js中与electron同时启动，index.js为启动electron的核心文件，最后会被webpack编译输出到输出目录下——dist/electron/main.js

render负责前端页面的可视化渲染，使用vue+element能够快速的构建出一套现代化的界面，某些状况下也可能会与原生app进行通讯，如去除默认边框、自定义快捷命令等，因此渲染层经常使用的一个方法就是ipcRenderer，经过ipcRenderer能够与electron进行通讯调用electron提供的一些原生api。

示例（关闭、放大、缩小）

这是vue定义的点击事件，经过发送不一样的参数与electron的mian进行交互。

main.js负责监听通讯并执行动做

示例（解决打包后没法复制粘贴的问题）

service为分为rutes、views、app.js三部分，rutes负责整个前端页面提供调用接口，app.js负责服务的启动和接口路由的注册，view内使用pug模板承载一些异常状态的访问页面。

示例（实现分环境打包接口）

这里须要注意一下，这个接口的实现是很是灵活的，须要根据你当前项目的编译文件进行配置，好比个人项目开发时使用gulp打包编译环境到dist，其编译命令分别为:

• gulp build:Dev(联调环境)
• gulp build:Test(测试环境)
• gulp build:Slave(预发布环境)
• gulp build:Prod(线上环境)

那么同理，配置好dist输出文件目录，收到请求后执行事先实现好的shell命令便可完成打包这一步，若是你不太了解环境编译打包这块内容，能够参考我以前的一篇文章"《武装你的小程序——开发流程指南》"；

代码实现

build 打包app目录 build是app打包完成后的输出目录，这个文件能够存放你的项目图标，打包的时候electron会默认在这个目录下找图标，若是找不到就会使用electron默认图标。

使用electron遇到的问题

• 官方强烈推荐使用yarn安装依赖，淘宝镜像安装的依赖会在打包的时候致使超级多的未知bug！！！好比我一不当心使用了cnpm安装了elemnent-ui最后打包致使没法解析该模块，只能删除node-modules从新使用yarn安装。

• error:Cannot assign to read only property 'exports' of object '#<Object>' 在express项目里使用了model.exports方式导出模块，但webpack 2中不容许混用import和module.exports 解决办法：

1.解决办法就是统一改为ES6的方式编写便可. import {a} from './a'; export default a;

2.引入插件transform-es2015-modules-commonjs yarn add babel-plugin-transform-es2015-modules-commonjs 而后在 babelrc中配置
{ "plugins": ["transform-es2015-modules-commonjs"] } 便可解决

• 若是在electron中使用了child_process去开启一个子进程执行shell的话，像是gulp，npm这种在开发环境能够正常执行，但打包app后node执行的环境变量就会被更改，致使执行失败，能够将process.env.PATH手动更改成process.env.PATH+=':/usr/local/bin'便可。
• 打包的app图标不是本身配置的图标？

脚手架的pacage.json有三个字段

你能够在这里配置你的项目图标。

项目展望

当前项目已经能够在公司内部的生产环境中使用，但与内部项目耦合严重，不够灵活，同时还有一些未知的问题和不足，我会在后续慢慢完善和优化，待解耦完成代码足够健壮的状况下我会选择将项目代码开源出来，下面列出我后续将要实现的功能。

1. 项目管理器功能，可配置多个不一样项目分别进行打包上传。
2. 高度自定义的配置信息：gitlab的token、钉钉机器人的token、不一样项目的打包执行脚本、不一样的环境配置。
3. 支持自定义分支列表而不是一次所有拉取出来，这对一些拥有超多的分支大型项目来讲是不灵活的。
4. 除了接口的shell脚本执行结果外打包后的验证功能，能够经过读取部分差别化文件进行比对打包结果。

结语

通过两个多月的空闲时间开发，期间算上demo作了三个版本，从layui+express的先后端耦合版的1.0.0版本demo，到分离先后端分离的1.1.0的第一版一切完成准备部署线上开发环境，由于前期思考的一些失误致使项目部署失败，再到从web转移到使用electron开发app安装在本地的1.2.0版本这个过程当中收获满满，这个过程使我在思考问题和代码设计、项目架构的搭建各个方面都有了一个全新的认识，与此同时也学习到了一些新的技术框架，再此还要感谢同事大佬们的帮助为我提供各类思路和技术支持。

如今是凌晨四点钟，写不动了两个眼皮已经开始打架了，你看过北京凌晨四点钟的太阳么？emmm....根本就没有太阳，可能洛杉矶天亮的比较早，真羡慕科比大佬。今天是周六能够睡个懒觉起床吃饭打农药，熬夜的瘾是戒不掉了，但仍是奉劝你们不要熬夜了，由于夜熬得太烂了就很差吃了。同时欢迎你们关注公众号前端小苑，我会按期在这里发表原创文章。