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....根本就沒有太陽，可能洛杉磯天亮的比較早，真羨慕科比大佬。今天是週六能夠睡個懶覺起牀吃飯打農藥，熬夜的癮是戒不掉了，但仍是奉勸你們不要熬夜了，由於夜熬得太爛了就很差吃了。同時歡迎你們關注公衆號前端小苑，我會按期在這裏發表原創文章。