那一天我二十一歲，在我一生的黃金時代，我有好多奢望。我想愛，想吃，還想在一瞬間變成天上半明半暗的雲，后來我才知道，生活就是個緩慢受錘的過程，人一天天老下去，奢望也一天天消逝，最后變得像挨了錘的牛一樣。可是我過二十一歲生日時沒有預見到這一點。我覺得自己會永遠生猛下去，什么也錘不了我。
前言
現在是凌晨一點，可能是在夜里的時候人會變得比較感性，所以突然想到了王小波在黃金時代中寫下的這段話，沒有理由的在這篇技術文章中將它作為引言。希望大家在自己的黃金時代永遠的生猛下去，什么也錘不了你。
書歸正傳，咱們上回書說到在我的第一版小程序發布系統被服務器拍倒在沙灘上后，我把目光從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有三個字段
你可以在這里配置你的項目圖標。
項目展望
當前項目已經可以在公司內部的生產環境中使用，但與內部項目耦合嚴重，不夠靈活，同時還有一些未知的問題和不足，我會在后續慢慢完善和優化，待解耦完成代碼足夠健壯的情況下我會選擇將項目代碼開源出來，下面列出我后續將要實現的功能。
- 項目管理器功能，可配置多個不同項目分別進行打包上傳。
- 高度自定義的配置信息：gitlab的token、釘釘機器人的token、不同項目的打包執行腳本、不同的環境配置。
- 支持自定義分支列表而不是一次全部拉取出來，這對一些擁有超多的分支大型項目來說是不靈活的。
- 除了接口的shell腳本執行結果外打包后的驗證功能，可以通過讀取部分差異化文件進行比對打包結果。
結語
經過兩個多月的空閑時間開發，期間算上demo做了三個版本，從layui+express的前后端耦合版的1.0.0版本demo，到分離前后端分離的1.1.0的初版一切完成准備部署線上開發環境，因為前期思考的一些失誤導致項目部署失敗，再到從web轉移到使用electron開發app安裝在本地的1.2.0版本這個過程中收獲滿滿，這個過程使我在思考問題和代碼設計、項目架構的搭建各個方面都有了一個全新的認識，與此同時也學習到了一些新的技術框架，再此還要感謝同事大佬們的幫助為我提供各種思路和技術支持。
現在是凌晨四點鍾，寫不動了兩個眼皮已經開始打架了，你看過北京凌晨四點鍾的太陽么？emmm....根本就沒有太陽，可能洛杉磯天亮的比較早，真羡慕科比大佬。今天是周六可以睡個懶覺起床吃飯打農葯，熬夜的癮是戒不掉了，但還是奉勸大家不要熬夜了，因為夜熬得太爛了就不好吃了。同時歡迎大家關注公眾號前端小苑，我會定期在這里發表原創文章。
