iOS混合開發庫(GICXMLLayout)4、腳手架、IDE

在前一篇文章中介紹瞭如何一步一步建立GIC應用，而且給出了一個大概的工程結構的參考，而這一篇文章將會介紹如何使用腳手架直接建立GIC工程以及如何使用使用VSCode來開發項目。

GICXMLLayout如今已經有了配套的腳手架工具，以及IDE的支持。這將進一步的提高你的開發效率。

腳手架

腳手架是基於Node.js開發的，首先須要確保您的電腦上安裝了node.js以及npm。

而後執行以下指令安裝腳手架。

sudo npm install gicxmllayout-cli -g
複製代碼

而後執行以下指令建立一個GIC工程。

gic init YourProject
複製代碼

這時候腳手架會提供5種不一樣的工程模板供你選擇。

1. 基礎工程模板。

   這個模板是一個最基礎的模板，僅僅提供了最基礎的項目結構。沒有hotreload、hotupdate等功能。不建議使用

2. HotReload。

   這個模板在基本的項目結構之外增長了HotReload功能，建立完項目後按照腳手架的提示就能使用。

3. HotReload & VSCode。

   這個模板在模板2的基礎上，增長對VSCode的支持。這個模板須要你使用VSCode來開發，搭配gic提供的VSCode插件GICVSCodeExtension進行開發。

4. HotReload & VSCode & HotUpdate (推薦)

   這個模板在模板3的基礎上進一步的增長了HotUpdate功能，這個模板也是GIC推薦的模板，根據腳手架的提示，你能夠很容易的得到HotReload和HotUpdate功能。

5. Tabs

   這個模板在模板4的基礎上提供了Tabs功能。能夠直接使用XML來建立一個具有Tabs功能的應用。並且你也會發現，tabs功能是經過自定義元素的方式來實現的。

IDE支持

我我的推薦使用VSCode做爲XML、JavaScript等文件的開發工具，而且針對VSCode已經配套開發了一個插件GICVSCodeExtension，利用這個插件你能夠得到以下幾個功能。

1. 針對XML文件，元素、屬性的智能提示。
2. 針對JavaScript代碼具有將ES6編譯成ES5的功能，也就是意味着你能夠直接寫ES6規範的代碼，而無需擔憂兼容性問題(事實上不一樣的iOS版本對於ES6的支持是不同的)。最新版本已經加入了對ES8中的async、await的編譯支持。
3. 提供了HotReload功能所需的http服務器。你也能夠經過配置文件來修改http端口。
4. 提供了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個配置項。

1. Behaviors。

   這個配置項用於你提供自定義的behavior配置，經過這個配置，可使得VSCode能夠識別你定義的behavior元素以及屬性。主要是提供智能提示功能。

2. Elements

   這個配置項用於你提供自定義元素的配置，經過這個配置，可使得VSCode能夠識別你定義的元素以及屬性。主要是提供智能提示功能。

3. Http Server Port

   這個配置用來提供在使用HotReloading功能的時候Http服務器的端口。

4. Project Folder Name。(不建議配置)

   這個配置用於，若是你的項目不是從腳手架建立的，而是本身建立的，而且項目結構也不是按照範例建立的，這個配置就容許你自定義工程文件夾，以便插件可以提供完整的功能。

以上配置默認都是全局配置，若是你須要對某個工程單獨進行設置，那麼就須要在workspace setting一欄設置，以下圖。

修改完配置之後右鍵選擇初始化，使得配置生效

建立頁面/JS文件

你可使用ctr+cmd+n的快捷鍵來建立新的頁面，或者經過在explorer中右鍵選擇來建立新的頁面或者JS文件，以下圖。