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文件，以下图。