iOS混合開發庫(GICXMLLayout)四、腳手架、IDE
在前一篇文章中介紹瞭如何一步一步建立GIC應用，並且給出了一個大概的工程結構的參考，而這一篇文章將會介紹如何使用腳手架直接建立GIC工程以及如何使用使用VSCode來開發專案。
GICXMLLayout現在已經有了配套的腳手架工具，以及IDE的支援。這將進一步的提升你的開發效率。
腳手架
腳手架是基於Node.js開發的，首先需要確保您的電腦上安裝了node.js以及npm。
然後執行如下指令安裝腳手架。
sudo npm install gicxmllayout-cli -g
複製程式碼然後執行如下指令建立一個GIC工程。
gic init YourProject
複製程式碼這時候腳手架會提供5種不同的工程模板供你選擇。
- 基礎工程模板。
這個模板是一個最基礎的模板，僅僅提供了最基礎的專案結構。沒有
hotreload、hotupdate等功能。不建議使用 - HotReload。
這個模板在基本的專案結構以外增加了
HotReload功能，建立完專案後按照腳手架的提示就能使用。 - HotReload & VSCode。
這個模板在模板2的基礎上，增加對VSCode的支援。這個模板需要你使用VSCode來開發，搭配
gic提供的VSCode外掛GICVSCodeExtension進行開發。 - HotReload & VSCode & HotUpdate (推薦)
這個模板在模板3的基礎上進一步的增加了
HotUpdate功能，這個模板也是GIC推薦的模板，根據腳手架的提示，你可以很容易的獲得HotReload和HotUpdate功能。 - Tabs
這個模板在模板4的基礎上提供了Tabs功能。可以直接使用XML來建立一個具備Tabs功能的應用。而且你也會發現，tabs功能是通過自定義元素的方式來實現的。
IDE支援
我個人推薦使用VSCode作為XML、JavaScript等檔案的開發工具，並且針對VSCode已經配套開發了一個外掛GICVSCodeExtension，利用這個外掛你可以獲得如下幾個功能。
- 針對XML檔案，
元素、屬性的智慧提示。 - 針對
JavaScript程式碼具備將ES6編譯成ES5的功能，也就是意味著你可以直接寫ES6規範的程式碼，而無需擔心相容性問題(事實上不同的iOS版本對於ES6的支援是不一樣的)。最新版本已經加入了對ES8中的async、await的編譯支援。 - 提供了HotReload功能所需的http伺服器。你也可以通過配置檔案來修改http埠。
- 提供了
HotUpdate測試功能。
安裝外掛。
首先使用VSCode開啟GIC工程的目錄。
然後在VSCode的外掛市場中搜索安裝GICVSCodeExtension外掛。如下圖：
最後，enjoy your project
HotReload 功能
使用HotReload功能的話建議使用腳手架通過模板3或者模板3以上的模板來建立專案。 GICVSCodeExtension外掛在啟動http server的同時會建立一個websocket server，以便在project中通過websockt獲取HotReload命令。
當你在VSCode中使用cmd+r快捷鍵後，外掛就會發出一個HotReload指令，所有連線到websockt server的裝置都能收到該指令，進而重新載入整個應用。你無需使用XCode重新編譯應用就能獲得實時檢視修改的能力。
HotUpdate
如果你使用腳手架通過模板4或以上的模板來建立專案，那麼配合VSCode的外掛就能獲得HotUpdate的功能。
執行應用後，修改你project中的package.json檔案中的version欄位，並且修改專案中的任意樣式，然後點選應用中的檢查更新按鈕，你會發現剛剛的修改生效了，並且顯示的版本號也修改了。
HotUpdate功能不同於HotReload。HotReload僅僅適用於開發，方便你在開發的時候無需重新編譯整個iOS工程就能實時檢視修改的UI、邏輯。而HotUpdate適用於app已經發布後的熱更新、熱修復。
外掛配置
首先按照下圖所示開啟VSCode的配置頁面。
然後進入GICXMLLayout的配置選項。如下圖。
GICXMLLayout目前提供了4個配置項。
-
Behaviors。這個配置項用於你提供自定義的behavior配置，通過這個配置，可以使得
VSCode可以識別你定義的behavior元素以及屬性。主要是提供智慧提示功能。 -
Elements這個配置項用於你提供自定義元素的配置，通過這個配置，可以使得
VSCode可以識別你定義的元素以及屬性。主要是提供智慧提示功能。 -
Http Server Port這個配置用來提供在使用
HotReloading功能的時候Http伺服器的埠。 -
Project Folder Name。(不建議配置)
這個配置用於，如果你的專案不是從腳手架建立的，而是自己建立的，並且專案結構也不是按照範例建立的，這個配置就允許你自定義工程資料夾，以便外掛能夠提供完整的功能。
以上配置預設都是全域性配置，如果你需要對某個工程單獨進行設定，那麼就需要在workspace setting一欄設定，如下圖。
修改完配置以後右鍵選擇初始化，使得配置生效
建立頁面/JS檔案
你可以使用ctr+cmd+n的快捷鍵來建立新的頁面，或者通過在explorer中右鍵選擇來建立新的頁面或者JS檔案，如下圖。